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 15^th November 2012 and today.

It has December 31^st 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.