Getting value from JQUERY datepicker

Question

If I want to display the JQUERY UI datepicker inline by attaching it to a DIV like    div someID   datepicker   - how do I access the chosen date  I assume if it s not bound to an INPUT then it won t be submitted with the form    I guess as a followup  if I need to bind it to an INPUT element  is there a way to control the positioning of the datepicker relative to the INPUT element  If I wanted the datepicker to appear above or to the side of the element rather than below it  how would I do that    Forgive me if this answer is somewhere really obvious

User · Accepted Answer

If you want to get the date when the user selects it, you can do this:

$("#datepicker").datepicker({
    onSelect: function() { 
        var dateObject = $(this).datepicker('getDate'); 
    }
});

I am not sure about the second part of your question. But, have you tried using style sheets and relative positioning?

User · Answer

To position the datepicker next to the input field you could use following code       datepicker   datepicker       beforeShow  function input  inst                inst dpDiv css  marginLeft  input offsetWidth    px

User · Answer

You can also try this       datepickerID   val      This is the simplest way

User · Answer

You could do it as follows - with validation just to ensure that the datepicker is bound to the element   var dt   if     div someID   is   hasDatepicker          dt      div someID   datepicker  getDate

User · Answer

You could remove the name attribute of this input  so it won t be submited   To access the value of this controll      div someID   datepicker   getDate      and your may have a look at the document in http   jqueryui com demos datepicker

User · Answer

div someID   datepicker      onSelect  function dateText  inst    alert dateText           you must bind it to input element only

User · Answer

see tag input example    lt div class  quot input-group date quot  data-target-input  quot nearest quot  gt                           lt input type  quot text quot  class  quot form-control datetimepicker-input form-control-sm quot  data-target  quot  dt expdate quot  id  quot dt expdate quot    gt                           lt div class  quot input-group-append quot  data-target  quot  dt expdate quot  data-toggle  quot datetimepicker quot  gt                               lt div class  quot input-group-text form-control-sm quot  gt  lt i class  quot fa fa-calendar quot  gt  lt  i gt  lt  div gt                           lt  div gt                       lt  div gt   acess to get  amp  assign value from id  quot dt expdate quot   get value  var date     quot  dt expdate quot   val     assign value     quot  dt expdate quot   val  20 08 2020

User · Answer

I needed to do this for a sales report that allows the user to choose a date range   The solution is similar to another answer  but I wanted to provide my example just to show you the practical real world use that I applied this to  var reportHeader    Product Sales History Report for       FromDate   val    to       ToDate   val

User · Answer

If your selected elements are not one  you need use this way       type  date     datepicker        type  date     change function         var date     this  datepicker  getDate        console log date

User · Answer

You can use the getDate method   var d      div someID   datepicker  getDate      That will give you a Date object in d   There aren t any options for positioning the popup but you might be able to do something with CSS or the beforeShow event if necessary

[jquery] Getting value from JQUERY datepicker

Examples related to jquery

Examples related to jquery-ui

Examples related to jquery-ui-datepicker