All samples are using Ink.requireModules, please read how to use it at Ink.requireModules section

Ink.UI.DatePicker class

Methods
Method name Description
new DatePicker(selector, [options]) Constructor
.destroy() Destroys this datepicker, removing it from the page.
.getDate() Gets the currently selected date as a JavaScript date.
.getI18n() Get my I18n instance with the calendar text
.getLanguage() Gets the language code string (pt_PT or en_US for example) currently in use.
.isMonthRendered() Checks if the calendar screen is in 'select day' mode
.setDate(dateString) This method allows the user to set the DatePicker's date on run-time.
.setI18n(i18n) Set my I18n instance with the calendar text
.setLanguage(language) Set the language to the given language code
.show() Shows the calendar.

new Ink.UI.DatePicker(selector, [options])

Accepts

  • selector

    Datepicker element
  • options

    Options
  • options.lang

    Set the language of the DatePicker, to show month names, day names, etc. Internally this results in changing our Ink.Util.I18n instance. pt_PT and en_US are available, but using getI18n().append({ lang_CODE: {...} }) you can create your own language.
  • options.autoOpen

    Flag to automatically open the datepicker.
  • options.cssClass

    CSS class to be applied on the datepicker
  • options.pickerField

    (if not using in an input[type="text"]) Element which displays the DatePicker when clicked. Defaults to an "open" link.
  • options.dateRange

    Enforce limits to year, month and day for the Date, ex: '1990-08-25:2020-11'
  • options.displayInSelect

    Flag to display the component in a select element.
  • options.dayField

    (if using options.displayInSelect) `select` field with days.
  • options.monthField

    (if using options.displayInSelect) `select` field with months.
  • options.yearField

    (if using options.displayInSelect) `select` field with years.
  • options.createSelectOptions

    (if using options.displayInSelect) create the `option` elements with months, days, and years. Otherwise, datepicker trusts you to create them yourself.
  • options.format

    Date format string
  • options.onFocus

    If the datepicker should open when the target element is focused. Defaults to true.
  • options.onMonthSelected

    Callback to execute when the month is selected.
  • options.onSetDate

    Callback to execute when the date is set.
  • options.onYearSelected

    Callback to execute when the year is selected.
  • options.position

    Position for the datepicker. Either 'right' or 'bottom'. Defaults to 'right'.
  • options.showClean

    If the clean button should be visible. Defaults to true.
  • options.showClose

    If the close button should be visible. Defaults to true.
  • options.shy

    If the datepicker should hide automatically when the user clicks outside. Defaults to true.
  • options.startDate

    Date to define initial month. Must be in yyyy-mm-dd format.
  • options.startWeekDay

    First day of the week. Sunday is zero. Defaults to 1 (Monday).
  • options.validYearFn

    Callback to execute when 'rendering' the month (in the month view)
  • options.validMonthFn

    Callback to execute when 'rendering' the month (in the month view)
  • options.validDayFn

    Callback to execute when 'rendering' the day (in the month view)
  • options.nextValidDateFn

    Function to calculate the next valid date, given the current. Useful when there's invalid dates or time frames.
  • options.prevValidDateFn

    Function to calculate the previous valid date, given the current. Useful when there's invalid dates or time frames.
  • options.yearRange

    Enforce limits to year for the Date, ex: '1990:2020' (deprecated)
  • options.month

    (Deprecated. use options.lang or i18n instead) Hash of month names. Defaults to english month names. January is 1.
  • options.wDay

    (Deprecated. use options.lang or i18n instead) Hash of week day names. Sunday is 0. Defaults to { 0:'Sunday', 1:'Monday', etc...
  • options.nextLinkText

    (Deprecated. use options.lang or i18n instead) Text for the previous button. Defaults to '»'.
  • options.prevLinkText

    (Deprecated. use options.lang or i18n instead) Text for the previous button. Defaults to '«'.
  • options.ofText

    (Deprecated. use options.lang or i18n instead) Text to show between month and year. Defaults to ' of '.
  • options.cleanText

    (Deprecated. use options.lang or i18n instead) Text for the clean button. Defaults to 'Clear'.
  • options.closeText

    (Deprecated. use options.lang or i18n instead) Text for the close button. Defaults to 'Close'.

Demo

Code

<div class="ink-form">
    <div class="control-group column-group no-margin">
        <div class="control all-30">
            <input type="text" id="myDatePicker" class="ink-datepicker" />
        </div>
    </div>
</div>

<script>
    // Not required if you're using autoload.js
    Ink.requireModules(['Ink.Dom.Selector_1','Ink.UI.DatePicker_1'],function( Selector, DatePicker ){
        var datePickerObj = new DatePicker( '#myDatePicker' );
    });
</script>

If you need to define a start and end date, check the example below, where you can only select dates between 15th November 2012 and today.

It has December 31st 2013 filled in by default.

Demo

Code

<div class="ink-form">
    <div class="control-group column-group no-margin">
        <div class="control all-30">
            <input type="text" id="myDatePicker2"
                class="ink-datepicker"
                data-date-range="2012-11-15:NOW"
                data-start-date="2013-12-31" />
        </div>
    </div>
</div>

<script>
    // Not required if you're using autoload.js
    Ink.requireModules(['Ink.UI.DatePicker_1'],function(DatePicker) {
        var datePickerObj = new DatePicker( '#myDatePicker2');
    });
</script>

.destroy() method

Destroys this datepicker, removing it from the page.

.getDate() method

Gets the currently selected date as a JavaScript date.

.getI18n() method

Get my I18n instance with the calendar text

.getLanguage() method

Gets the language code string (pt_PT or en_US for example) currently in use.
May be global

.isMonthRendered() method

Checks if the calendar screen is in 'select day' mode

.setDate(dateString) method

This method allows the user to set the DatePicker's date on run-time.

Accepts

  • dateString

    A Date object, or date string in yyyy-mm-dd format.

.setI18n(i18n) method

Set my I18n instance with the calendar text

Accepts

  • i18n

    I18n instance

.setLanguage(language) method

Set the language to the given language code
If we don't have an i18n instance, create one which is a copy of the global one.

Accepts

  • language

    Language code (ex: en_US, pt_PT)

.show() method

Shows the calendar.