How to restrict the selectable date ranges in Bootstrap Datepicker

Question

I need to use datepicker which provides me the option of restricting the selectable dates  We had been using jQuery UI which is used to support it using minDate  maxDate options        id date   datepicker  minDate   1  maxDate    1M  10D        Recently we started using Twitter Bootstrap for our styles  And apparently  Twitter Bootstrap is incompatible with jQuery UI styles  So I tried using one of the bootstrap compatible datepickers available at http   www eyecon ro bootstrap-datepicker     Unfortunately  the above plugin is not as configurable as jQuery UI s datepicker  Can anyone help me out with restricting the selectable date ranges in the new datepicker

User · Answer

i am using v3 1 3 and i had to use data  DateTimePicker   like this  var fromE            fromInput    var toE            toInput        form-datepicker   datetimepicker dtOpts        form-datepicker   on  change   function e      var isTo     this  attr  name        to                  isTo   fromInput   toInput             data  DateTimePicker    isTo    setMaxDate     setMinDate    moment   this  val     DD MM YYYY

User · Answer

Another possibility is to use the options with data attributes  like this minimum date 1 week before     lt input class  datepicker  data-date-start-date  -1w  gt    More info  http   bootstrap-datepicker readthedocs io en latest options html

User · Answer

With selectable date ranges you might want to use something like this  My solution prevents selecting  from date  bigger than  to date and changes  to date startDate every time when user selects new date in  from date box    http   bootply com 74352  JS file   var startDate   new Date  01 01 2012    var FromEndDate   new Date    var ToEndDate   new Date     ToEndDate setDate ToEndDate getDate   365        from date   datepicker        weekStart  1      startDate   01 01 2012       endDate  FromEndDate       autoclose  true         on  changeDate   function selected           startDate   new Date selected date valueOf             startDate setDate startDate getDate new Date selected date valueOf                   to date   datepicker  setStartDate   startDate                to date        datepicker            weekStart  1          startDate  startDate          endDate  ToEndDate          autoclose  true             on  changeDate   function selected           FromEndDate   new Date selected date valueOf             FromEndDate setDate FromEndDate getDate new Date selected date valueOf                   from date   datepicker  setEndDate   FromEndDate             HTML     lt input class  from date  placeholder  Select start date  contenteditable  false  type  text  gt   lt input class  to date  placeholder  Select end date  contenteditable  false  type  text     And do not forget to include bootstrap datepicker js and  css files aswell

User · Answer

The Bootstrap datepicker is able to set date-range  But it is not available in the initial release Master Branch  Check the branch as  range  there  or just see at https   github com eternicode bootstrap-datepicker   you can do it simply with startDate and endDate   Example       datepicker   datepicker       startDate   -2m       endDate    2d

User · Answer

Most answers and explanations are not to explain what is a valid string of endDate or startDate  Danny gave us two useful example       datepicker   datepicker       startDate   -2m       endDate    2d        But why let s take a look at the source code at bootstrap-datetimepicker js  There are some code begin line 1343 tell us how does it work   if     -   d  dmwy    s    -   d  dmwy      test date                 var part re      -   d    dmwy                     parts   date match    -   d    dmwy   g                   part  dir              date   new Date                for  var i   0  i  lt  parts length  i                      part   part re exec parts i                    dir   parseInt part 1                    switch  part 2                         case  d                           date setUTCDate date getUTCDate     dir                           break                      case  m                           date   Datetimepicker prototype moveMonth call Datetimepicker prototype  date  dir                           break                      case  w                           date setUTCDate date getUTCDate     dir   7                           break                      case  y                           date   Datetimepicker prototype moveYear call Datetimepicker prototype  date  dir                           break                                              return UTCDate date getUTCFullYear    date getUTCMonth    date getUTCDate    date getUTCHours    date getUTCMinutes    date getUTCSeconds    0               There are four kinds of expressions    w means week m means month y means year d means day   Look at the regular expression   -   d  dmwy    s    -   d  dmwy      You can do more than these -0d or  1m   Try harder like startDate   1y -2m  0d -1w  And the separator   could be one of   f n r t v

User · Answer

The example above can be simplify a bit  Additionally you can put date manually from keyboard instead of selecting it via datepicker only  When clearing the value you need to handle also  on clearDate  action to remove startDate endDate boundary   JS file       from date   datepicker       format   yyyy-mm-dd       autoclose  true     on  changeDate   function  selected        var startDate   new Date selected date valueOf             to date   datepicker  setStartDate   startDate      on  clearDate   function  selected            to date   datepicker  setStartDate   null            to date   datepicker       format   yyyy-mm-dd       autoclose  true     on  changeDate   function  selected        var endDate   new Date selected date valueOf             from date   datepicker  setEndDate   endDate      on  clearDate   function  selected            from date   datepicker  setEndDate   null         HTML    lt input class  from date  placeholder  Select start date  type  text  name  from date  gt   lt input class  to date  placeholder  Select end date  type  text  name  to date  gt

[javascript] How to restrict the selectable date ranges in Bootstrap Datepicker?

Examples related to javascript

Examples related to twitter-bootstrap

Examples related to datepicker

Examples related to bootstrap-datepicker