[Summary view] [Print] [Text view]

   1  # Home
   2  
   3  http://www.eyecon.ro/bootstrap-datepicker/
   4  
   5  # Example
   6  
   7  Attached to a field with the format specified via options:
   8  
   9      <input type="text" value="02-16-2012" id="datepicker">  
  10  ######
  11      $('#datepicker').datepicker({
  12          format: 'mm-dd-yyyy'
  13      });
  14  
  15  Attached to a field with the format specified via data tag:
  16  
  17      <input type="text" value="02/16/12" data-date-format="mm/dd/yy" id="datepicker" >
  18  ######
  19      $('#datepicker').datepicker();
  20  
  21  As component:
  22  
  23      <div class="input-append date" id="datepicker" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
  24          <input size="16" type="text" value="12-02-2012" readonly>
  25          <span class="add-on"><i class="icon-th"></i></span>
  26      </div>
  27  ######
  28      $('#datepicker').datepicker();
  29  
  30  Attached to non-field element, using events to work with the date values.
  31  
  32      <div class="alert alert-error" id="alert">
  33          <strong>Oh snap!</strong>
  34      </div>
  35      <table class="table">
  36          <thead>
  37              <tr>
  38                <th>
  39                    Start date
  40                    <a href="#" class="btn small" id="date-start" data-date-format="yyyy-mm-dd" data-date="2012-02-20">Change</a>
  41                </th>
  42                <th>
  43                    End date
  44                    <a href="#" class="btn small" id="date-end" data-date-format="yyyy-mm-dd" data-date="2012-02-25">Change</a>
  45                </th>
  46              </tr>
  47          </thead>
  48          <tbody>
  49              <tr>
  50                <td id="date-start-display">2012-02-20</td>
  51                <td id="date-end-display">2012-02-25</td>
  52              </tr>
  53          </tbody>
  54      </table>
  55  ######
  56      var startDate = new Date(2012,1,20);
  57      var endDate = new Date(2012,1,25);
  58      $('#date-start')
  59          .datepicker()
  60          .on('changeDate', function(ev){
  61              if (ev.date.valueOf() > endDate.valueOf()){
  62                  $('#alert').show().find('strong').text('The start date must be before the end date.');
  63              } else {
  64                  $('#alert').hide();
  65                  startDate = new Date(ev.date);
  66                  $('#date-start-display').text($('#date-start').data('date'));
  67              }
  68              $('#date-start').datepicker('hide');
  69          });
  70      $('#date-end')
  71          .datepicker()
  72          .on('changeDate', function(ev){
  73              if (ev.date.valueOf() < startDate.valueOf()){
  74                  $('#alert').show().find('strong').text('The end date must be after the start date.');
  75              } else {
  76                  $('#alert').hide();
  77                  endDate = new Date(ev.date);
  78                  $('#date-end-display').text($('#date-end').data('date'));
  79              }
  80              $('#date-end').datepicker('hide');
  81          });
  82      });
  83  
  84  
  85  # Using bootstrap-datepicker.js
  86  
  87  Call the datepicker via javascript:
  88  
  89      $('.datepicker').datepicker()
  90  
  91  ## Dependencies
  92  
  93  Requires bootstrap's dropdown component (`dropdowns.less`) for some styles, and bootstrap's sprites (`sprites.less` and associated images) for arrows.
  94  
  95  A standalone .css file (including necessary dropdown styles and alternative, text-based arrows) can be generated by running `build/build_standalone.less` through the `lessc` compiler:
  96  
  97      $ lessc build/build_standalone.less datepicker.css
  98  
  99  ## Options
 100  
 101  All options that take a "Date" can handle a `Date` object; a String formatted according to the given `format`; or a timedelta relative to today, eg '-1d', '+6m +1y', etc, where valid units are 'd' (day), 'w' (week), 'm' (month), and 'y' (year).
 102  
 103  ### format
 104  
 105  String.  Default: 'mm/dd/yyyy'
 106  
 107  The date format, combination of d, dd, m, mm, M, MM, yy, yyy.
 108  
 109  ### weekStart
 110  
 111  Integer.  Default: 0
 112  
 113  Day of the week start. 0 (Sunday) to 6 (Saturday)
 114  
 115  ### startDate
 116  
 117  Date.  Default: Beginning of time
 118  
 119  The earliest date that may be selected; all earlier dates will be disabled.
 120  
 121  ### endDate
 122  
 123  Date.  Default: End of time
 124  
 125  The latest date that may be selected; all later dates will be disabled.
 126  
 127  ### autoclose
 128  
 129  Boolean.  Default: false
 130  
 131  Whether or not to close the datepicker immediately when a date is selected.
 132  
 133  ### startView
 134  
 135  Number, String.  Default: 0, 'month'
 136  
 137  The view that the datepicker should show when it is opened.  Accepts values of 0 or 'month' for month view (the default), 1 or 'year' for the 12-month overview, and 2 or 'decade' for the 10-year overview.  Useful for date-of-birth datepickers.
 138  
 139  ### language
 140  
 141  String.  Default: 'en'
 142  
 143  The two-letter code of the language to use for month and day names.  These will also be used as the input's value (and subsequently sent to the server in the case of form submissions).  Currently ships with English ('en'), German ('de'), Brazilian ('br'), and Spanish ('es') translations, but others can be added (see I18N below).  If an unknown language code is given, English will be used.
 144  
 145  ## Markup
 146  
 147  Format a component.
 148  
 149      <div class="input-append date" id="datepicker" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
 150          <input class="span2" size="16" type="text" value="12-02-2012">
 151          <span class="add-on"><i class="icon-th"></i></span>
 152      </div>
 153  
 154  ## Methods
 155  
 156  ### .datepicker(options)
 157  
 158  Initializes an datepicker.
 159  
 160  ### show
 161  
 162  Arguments: None
 163  
 164  Show the datepicker.
 165  
 166      $('#datepicker').datepicker('show');
 167  
 168  ### hide
 169  
 170  Arguments: None
 171  
 172  Hide the datepicker.
 173  
 174      $('#datepicker').datepicker('hide');
 175  
 176  ### update
 177  
 178  Arguments: None
 179  
 180  Update the datepicker with the current input value.
 181  
 182      $('#datepicker').datepicker('update');
 183  
 184  ### setStartDate
 185  
 186  Arguments:
 187  
 188  * startDate (String)
 189  
 190  Sets a new lower date limit on the datepicker.
 191  
 192      $('#datepicker').datepicker('setStartDate', '2012-01-01');
 193  
 194  Omit startDate (or provide an otherwise falsey value) to unset the limit.
 195  
 196      $('#datepicker').datepicker('setStartDate');
 197      $('#datepicker').datepicker('setStartDate', null);
 198  
 199  ### setEndDate
 200  
 201  Arguments:
 202  
 203  * endDate (String)
 204  
 205  Sets a new upper date limit on the datepicker.
 206  
 207      $('#datepicker').datepicker('setEndDate', '2012-12-31');
 208  
 209  Omit endDate (or provide an otherwise falsey value) to unset the limit.
 210  
 211      $('#datepicker').datepicker('setEndDate');
 212      $('#datepicker').datepicker('setEndDate', null);
 213  
 214  ## Events
 215  
 216  Datepicker class exposes a few events for manipulating the dates.
 217  
 218  ### show
 219  
 220  Fired when the date picker is displayed.
 221  
 222  ### hide
 223  
 224  Fired when the date picker is hidden.
 225  
 226  ### changeDate
 227  
 228  Fired when the date is changed.
 229  
 230      $('#date-end')
 231          .datepicker()
 232          .on('changeDate', function(ev){
 233              if (ev.date.valueOf() < date-start-display.valueOf()){
 234                  ....
 235              }
 236          });
 237  
 238  ## Keyboard support
 239  
 240  The datepicker includes some keyboard navigation:
 241  
 242  ### up, down, left, right arrow keys
 243  
 244  By themselves, left/right will move backward/forward one day, up/down will move back/forward one week.
 245  
 246  With the shift key, up/left will move backward one month, down/right will move forward one month.
 247  
 248  With the ctrl key, up/left will move backward one year, down/right will move forward oone year.
 249  
 250  Shift+ctrl behaves the same as ctrl -- that is, it does not change both month and year simultaneously, only the year.
 251  
 252  ### escape
 253  
 254  The escape key can be used to hide and re-show the datepicker; this is necessary if the user wants to manually edit the value.
 255  
 256  ### enter
 257  
 258  When the picker is visible, enter will simply hide it.  When the picker is not visible, enter will have normal effects -- submitting the current form, etc.
 259  
 260  ## I18N
 261  
 262  The plugin supports i18n for the month and weekday names and the `weekStart` option.  The default is English ('en'); other available translations are avilable in the `js/locales/` directory, simply include your desired locale after the plugin.  To add more languages, simply add a key to `$.fn.datepicker.dates`, before calling `.datepicker()`.  Example:
 263  
 264      $.fn.datepicker.dates['en'] = {
 265          days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
 266          daysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
 267          daysMin: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"],
 268          months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
 269          monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
 270      };
 271  
 272  If your browser (or those of your users) is displaying characters wrong, chances are the browser is loading the javascript file with a non-unicode encoding.  Simply add `charset="UTF-8"` to your `script` tag:
 273  
 274      <script type="text/javascript" src="bootstrap-datepicker.de.js" charset="UTF-8"></script>