Datepicker

Design

Datepickers are used to capture date information and date configure settings.

Code

API: Stable
Example Element Code
Default datepicker input.

Just the date picker:


                                                                          <div class="ace-datepicker">
                                                                            <input id="datepicker" type="date" class="ace-form-input ace-form-input-datepicker">
                                                                          </div>

In a form group:


                                                                              <div class="ace-form-group ace-form-group-datepicker">
                                                                                    <div class="ace-form-item ace-form-item-label">
                                                                                          <label class="ace-form-label" for="datepicker"><span class="ace-text">Date picker input</span>
                                                                                          </label>
                                                                                    </div>
                                                                                    <div class="ace-form-item ace-form-item-datepicker">
                                                                                      <div class="ace-datepicker">
                                                                                        <input id="datepicker" type="date" class="ace-form-input ace-form-input-datepicker">
                                                                                      </div>
                                                                                    </div>
                                                                              </div>

Just the date picker:


                                                                          <% 
                                                                          ace.Datepicker(Array(_
                                                                            "id", "datepicker"_
                                                                          ))
                                                                          %>

                                                                          <% 
                                                                          ace.FormGroup(Array("type", "datepicker"))
                                                                            ace.FormItemLabel(Array())
                                                                              ace.Label(Array(_
                                                                                "text", "Date picker input",_
                                                                                "attrFor", "datepicker"_
                                                                              ))
                                                                            ace.FormItemLabelEnd
                                                                            ace.FormItemInput(Array("type", "datepicker"))
                                                                              ace.Datepicker(Array(_
                                                                                "id", "datepicker"_
                                                                              ))
                                                                            ace.FormItemInputEnd
                                                                          ace.FormGroupEnd 
                                                                          %>
A custom date format can be set.

Set the data-ace-datepicker-format attribute with a custom date format string.

Just the date picker:


                                                                          <div class="ace-datepicker">
                                                                            <input id="datepicker-format" type="date" data-ace-datepicker-format="%Y-%m-%d" class="ace-form-input ace-form-input-datepicker">
                                                                          </div>

In a form group:


                                                                              <div class="ace-form-group ace-form-group-datepicker">
                                                                                    <div class="ace-form-item ace-form-item-label">
                                                                                          <label class="ace-form-label" for="datepicker-format"><span class="ace-text">Date picker input</span>
                                                                                          </label>
                                                                                    </div>
                                                                                    <div class="ace-form-item ace-form-item-datepicker">
                                                                                      <div class="ace-datepicker">
                                                                                        <input id="datepicker-format" type="date" data-ace-datepicker-format="%Y-%m-%d" class="ace-form-input ace-form-input-datepicker">
                                                                                      </div>
                                                                                    </div>
                                                                              </div>

Set the dateformat property with a custom date format string.

Just the date picker:


                                                                          <%
                                                                          ace.Datepicker(Array(_
                                                                            "id", "datepicker-format",_
                                                                            "dateformat", "%Y-%m-%d"_
                                                                          ))
                                                                          %>

In a form group:


                                                                          <% 
                                                                          ace.FormGroup(Array("type", "datepicker"))
                                                                              ace.FormItemLabel(Array())
                                                                                ace.Label(Array(_
                                                                                  "text", "Date picker input",_
                                                                                  "attrFor", "datepicker-format"_
                                                                                ))
                                                                              ace.FormItemLabelEnd
                                                                              ace.FormItemInput(Array("type", "datepicker"))
                                                                                ace.Datepicker(Array(_
                                                                                  "id", "datepicker-format",_
                                                                                  "dateformat", "%Y-%m-%d"_
                                                                                ))
                                                                            ace.FormItemInputEnd
                                                                          ace.FormGroupEnd 
                                                                          %>
Custom text for the Date Picker's action button (mostly used for i18n).

Set the data-ace-datepicker-action-text attribute with a custom string.

Just the date picker:


                                                                          <div class="ace-datepicker">
                                                                            <input id="datepicker-custom-button" type="date" data-ace-datepicker-action-text="open now" class="ace-form-input ace-form-input-datepicker">
                                                                          </div>

In a form group:


                                                                              <div class="ace-form-group ace-form-group-datepicker">
                                                                                    <div class="ace-form-item ace-form-item-label">
                                                                                          <label class="ace-form-label" for="datepicker-custom-button"><span class="ace-text">Date picker input</span>
                                                                                          </label>
                                                                                    </div>
                                                                                    <div class="ace-form-item ace-form-item-datepicker">
                                                                                      <div class="ace-datepicker">
                                                                                        <input id="datepicker-custom-button" type="date" data-ace-datepicker-action-text="open now" class="ace-form-input ace-form-input-datepicker">
                                                                                      </div>
                                                                                    </div>
                                                                              </div>

Set the actiontext property with a custom string.

Just the date picker:


                                                                          <%
                                                                          ace.Datepicker(Array(_
                                                                            "id", "datepicker-custom-button",_
                                                                            "actiontext", "open now"_
                                                                          ))
                                                                          %>

In a form group:


                                                                          <% 
                                                                          ace.FormGroup(Array("type", "datepicker"))
                                                                            ace.FormItemLabel(Array())
                                                                              ace.Label(Array(_
                                                                                "text", "Date picker input",_
                                                                                "attrFor", "datepicker-custom-button"_
                                                                              ))
                                                                            ace.FormItemLabelEnd
                                                                            ace.FormItemInput(Array("type", "datepicker"))
                                                                              ace.Datepicker(Array(_
                                                                                "id", "datepicker-custom-button",_
                                                                                "actiontext", "open now"_
                                                                              ))
                                                                            ace.FormItemInputEnd
                                                                          ace.FormGroupEnd 
                                                                          %>
To restrict the date range, set the minimum and maximum allowable dates.

Set the min and max attributes with date strings in YYYY-MM-DD format.

Just the date picker:


                                                                          <div class="ace-datepicker">
                                                                            <input id="datepicker-daterange" type="date" min="2016-01-02" max="2016-01-08" class="ace-form-input ace-form-input-datepicker">
                                                                          </div>

In a form group:


                                                                              <div class="ace-form-group ace-form-group-datepicker">
                                                                                    <div class="ace-form-item ace-form-item-label">
                                                                                          <label class="ace-form-label" for="datepicker-daterange"><span class="ace-text">Date picker input</span>
                                                                                          </label>
                                                                                    </div>
                                                                                    <div class="ace-form-item ace-form-item-datepicker">
                                                                                      <div class="ace-datepicker">
                                                                                        <input id="datepicker-daterange" type="date" min="2016-01-02" max="2016-01-08" class="ace-form-input ace-form-input-datepicker">
                                                                                      </div>
                                                                                    </div>
                                                                              </div>

Set the min and max properties with date strings in YYYY-MM-DD format.

Just the date picker:


                                                                          <% 
                                                                          ace.Datepicker(Array(_
                                                                            "id", "datepicker-daterange",_
                                                                            "min", "2016-01-02",_
                                                                            "max", "2016-01-08"_
                                                                          ))
                                                                          %>

In a form group:


                                                                          <% 
                                                                          ace.FormGroup(Array("type", "datepicker"))
                                                                            ace.FormItemLabel(Array())
                                                                              ace.Label(Array(_
                                                                                "text", "Date picker input",_
                                                                                "attrFor", "datepicker-daterange"_
                                                                              ))
                                                                            ace.FormItemLabelEnd
                                                                            ace.FormItemInput(Array("type", "datepicker"))
                                                                              ace.Datepicker(Array(_
                                                                                "id", "datepicker-daterange",_
                                                                                "min", "2016-01-02",_
                                                                                "max", "2016-01-08"_
                                                                              ))
                                                                            ace.FormItemInputEnd
                                                                          ace.FormGroupEnd 
                                                                          %>
You programmatically change datepicker with the Javascript methods.

Example of setting the date with the ACE.Datepicker.setDate method, using jQuery:


                                                $('#id-of-trigger-element').on(click(function(){
                                                  ACE.Datepicker.setDate('#id-of-date-picker','2015-08-27')                
                                                }))

Custom date formats

Value Description Example output
%Y Full length year 2015
%y Two digit year 15
%m Two digit month 05
%d Two digit day 01

Javascript methods

Function Arguments Description Example
init elementSelector Bind all the events to date picker. 
ACE.Datepicker.init();
destroy elementSelector Removes the event bindings. 
ACE.Datepicker.destroy();
setDate elementSelector, dateInput (yyyy-mm-dd) or date object Sets the date programmatically. 
ACE.Datepicker.setDate('#acedatepicker','2015-08-27');
setRangeMin elementSelector, dateInput (yyyy-mm-dd) or date object Sets the date range minimum programmatically. 
ACE.Datepicker.setRangeMin('#acedatepicker','2016-01-02');
setRangeMax elementSelector, dateInput (yyyy-mm-dd) or date object Sets the date range maximum programmatically. 
ACE.Datepicker.setRangeMax('#acedatepicker','2016-01-08');

Dependencies

  • jQuery 1.10.2 http://jquery.com/
  • Yet Another Datepicker https://github.com/freqdec/datePicker