Design

Date Pickers are used to capture date information and date configure settings. They are usually used within Forms.

Code

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 can 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')
                                                            }))
You can listen for changes by binding to the original date picker input (note, this is not the visible vanity input).

Example using jQuery .change()


                                                            $("#IDOFDATEPICKER").change(function() {
                                                              console.log("Date picker changed");
                                                            });

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 (the div wrapper selector), dateInput (yyyy-mm-dd) or date object Sets the date programmatically. 
ACE.Datepicker.setDate('#acedatepicker','2015-08-27');
setRangeMin elementSelector (the div wrapper selector), dateInput (yyyy-mm-dd) or date object Sets the date range minimum programmatically. 
ACE.Datepicker.setRangeMin('#acedatepicker','2016-01-02');
setRangeMax elementSelector (the div wrapper selector), 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