jQuery UI Datepicker - Multiple Date Selections

Question

Is there a way to use the jQuery UI Datepicker widget to select multiple dates     All help is appreciated   If its not posable to use the jquery UI datepicker then is there something similar that does

User · Answer

The plugin developed by  dubrox is very lightweight and works almost identical to jQuery UI  My requirement was to have the ability to restrict the number of dates selected    Intuitively  the maxPicks property seems to have been provided for this purpose  but it doesn t work unfortunately   For those of you looking for this fix  here it is    First up  you need to patch jquery ui multidatespicker js  I have submitted a pull request on github  You can use that until dubrox merges it with the master or comes up with a fix of his own  Usage is really straightforward  The below code causes the date picker to not select any dates once the specified number of dates  maxPicks  has been already selected  If you unselect any previously selected date  it will let you select again until you reach the limit once again       mydatefield   multiDatesPicker  maxPicks  3

User · Answer

Just had a requirement for this  here is the code I used  Apply it to an input as normal  I am using the class typeof  multidatepicker   It maintains a list of unique dates in the owner textbox  You can also type in there  this is not validated - obviously the server needs to check the resulting list   I tried to get it to work with the datepicker s linked textbox but failed  so it creates an invisible input for the datepicker  it doesn t seem to work with display none  hence the odd styling    It is positioned over the main input so the datepicker appears in the correct place  and is 1px in width so you can still type into the main textbox   It s for an intranet with a fixed platform so I haven t done much cross-browser testing   Remember to include the handler on the body or it works confusingly       typeof  multidatepicker   each      function                 var  this     this                                    var picker       lt input tabindex  -1  style  position absolute opacity 0 width 1px  type  text   gt              picker insertAfter this           position  my  left top   at  left top   of this            datepicker               beforeShow                  function                                          this data  mdp-popped   true                                  onClose                   function dt  dpicker                                           var date     datepicker formatDate picker datepicker  option    dateFormat    picker datepicker  getDate                         var hash                           var curr    this val      this val   split   s   s                              var a                              each curr                           function                                                           if this        amp  amp      s    test this                                                                     a push this                                    hash this    true                                                                                                      if date  amp  amp   hash date                                                 a push date                             this val a join                                                                                                                        this data  mdp-popped   false                        this data  mdp-justclosed   true                                            this on  focus                function e                                                                if   this data  mdp-popped    amp  amp    this data  mdp-justclosed                         this next   datepicker  show                       this data  mdp-justclosed   false                                         body   on  click   function e        typeof  multidatepicker   data  mdp-justclosed   false

User · Answer

I have now spent quite some time trying to find a good date picker that support interval ranges  and eventually found this one   http   keith-wood name datepick html  I believe this may be the best jquery date picker for selecting a range or multiple dates  and it is claimed to have been the base for the jQuery UI datepicker  and I see no reason to doubt that since it seems to be really powerful  and also good documented

User · Answer

use this on      body   on  focus    datumwaehlen   function          this  datepicker           minDate  -20

User · Answer

Use this plugin http   multidatespickr sourceforge net   Select date ranges   Pick multiple dates not in secuence   Define a maximum number of pickable dates   Define a range X days from where it is possible to select Y dates  Define unavailable dates

User · Answer

lt div id  calendar  gt  lt  div gt   lt script gt    document  ready function         var days                calendar   datepicker           dateFormat   yymmdd           showWeek  true  showOtherMonths  false  selectOtherMonths  false          navigationAsDateFormat  true  prevText   MM   nextText   MM           onSelect  function d                var i     inArray d  days                if  i    -1                  days push d               else                 days splice i  1                      beforeShowDay  function d                return   true    inArray   datepicker formatDate  yymmdd   d   days     -1    ui-state-free     ui-state-busy                            lt  script gt    NOTE  You can prefill days with a list of dates like  20190101  with a piece of code in PHP   Add 2 lines to your CSS    calendar  ui-state-busy a  background  e6e6e6  important    calendar  ui-state-free a  background none  important     To get the list of days selected by the calendar in a  lt form gt     lt div id  calendar  gt  lt  div gt   lt form method  post  gt   lt input type  submit  name  calendar get  id  calendar get  value  Validate    gt   lt  form gt    Add this to the  lt script gt            calendar get   click function               this  append   lt input type  hidden  name  calendar days  value      days join             gt               Apply implode on the string in   POST  calendar days   and map strtotime to all the formatted dates

User · Answer

http   t1m0n name air-datepicker docs   I ve have tried several method of multi datepicker but only this works

User · Answer

I needed to do the same thing  so have written some JavaScript to enable this  using the onSelect and beforeShowDay events  It maintains its own array of selected dates  so unfortunately doesn t integrate with a textbox showing the current date  etc  I m just using it as an inline control  and I can then query the array for the currently selected dates  I used this code as a basis    lt script type  text javascript  gt     Maintain array of dates var dates   new Array     function addDate date        if  jQuery inArray date  dates   lt  0           dates push date      function removeDate index        dates splice index  1         Adds a date if we don t have it yet  else remove it function addOrRemoveDate date        var index   jQuery inArray date  dates       if  index  gt   0           removeDate index       else          addDate date         Takes a 1-digit number and inserts a zero before it function padNumber number        var ret   new String number       if  ret length    1           ret    0    ret      return ret     jQuery function          jQuery   datepicker   datepicker           onSelect  function  dateText  inst                addOrRemoveDate dateText                      beforeShowDay  function  date                var year   date getFullYear                   months and days are inserted into the array in the form  e g  01 01 2009   but here the format is  1 1 2009              var month   padNumber date getMonth     1               var day   padNumber date getDate                    This depends on the datepicker s date format             var dateString   month         day         year               var gotDate   jQuery inArray dateString  dates               if  gotDate  gt   0                       Enable date so it can be deselected  Set style to be highlighted                 return  true   ui-state-highlight                                 Dates not in the array are left enabled  but with no extra style             return  true                              lt  script gt

User · Answer

When you modifiy it a little  it works regardless which dateFormat you have set       datepicker   datepicker                           dateFormat          Unix timestamp                         onSelect  function dateText  inst                               addOrRemoveDate dateText                                                      beforeShowDay  function date                               var gotDate     inArray   datepicker formatDate   this  datepicker  option    dateFormat    date   dates                               if  gotDate  gt   0                                    return  false  ui-state-highlight    Event Name                                                              return  true

[jquery] jQuery UI Datepicker - Multiple Date Selections

Examples related to jquery

Examples related to jquery-ui

Examples related to datepicker

Examples related to ui-select2