Dependencies

NameFile
Coredist/js/core.js

Assets

TypeFile
jsdist/js/datepicker.js
cssdist/css/datepicker.css
lessdist/less/datepicker.less
scssdist/scss/datepicker.scss

Examples

Standard Datepicker

Barebones datepicker example with no default value set.

Add Min/Max

This example adds a min (01/01/2017) and max (03/12/2017) date restrictions by settings attributes directly on the date input.

No Monthly Rollovers

This example Removes the days in last month and next month from showing up in the current UI calendar.

Change Month/Day Labeling

Maybe you want your calendar in Japanese. No problem. You can change the day/months values by giving Datepicker a formatmap. You can also change formatting structure. See the config setup below.

Blackout, Holiday, and Special Dates

With Datepicker 2.0 you have the ability to set Blackout dates, holidays, and special "custom" dates. When a date is selected/entered, use the datepicker instances API (isBlackout(), isUnavailable(), isHoliday(), or isSpecial()) to check date selected. See below for more details.

Inline Calendar

We can roll AirBnb Style with inline calendars. It's even easy to update other html elements with the selected dates like in this below example.

dddd, mmmm dd yyyy

Setup

<div class="mk-dp-root">
	<input class="mk-dp" type="date" name="start-date" aria-label="Start Date" value="2017-02-27" />
</div>

Configuration Options via Data-Attributes

There are two ways to configure Datepicker, the first of which is by providing data attributes on the root input. Below is a list of all possible data attributes you may add to configure an instance. All data attributes are optional.

<div
	class="mk-dp-root"
	<!-- presentational format for dates -->
	data-format="mm/dd/yyyy"
	<!-- calendar renders as popup. Default is true. -->
	data-popup="true"
	<!-- Hide the date input UI (not calendar). Default is false. -->
	data-inputs="true">
	<!-- Enable/disable rollover dates. Default is true. -->
	data-rollover="false">
	<input type="text" class="mk-dp"
		name="startdate"
		aria-label="Start Date"
		<!-- min date in native date format -->
		min="2017-01-01"
		<!-- max date in native format -->
		max="2018-01-01"
		<!-- default value in native format -->
		value="2017-01-12" />
</div>

Instantiation

Below is an example of instantiating an Datepicker. Like all other Mk components, the first argument is the root and the second is configuration options. In the example below, we've provided all possible config options, however, all config properties are completely optional.

//get Datepicker object
var Datepicker = Mk.get('Datepicker');
//
//create instance
var datepicker = new Datepicker('#selector', {
	rollover: true/false,
	popup: true/false,
	format: 'mm/dd/yyyy',
	label: 'Some Label for Aria'
	blackouts: [
		// blackout all sunday and saturdays
		'sunday',
		'saturday',
		// blackout a single date
		'2017-01-07',
		// set a range
		'2017-01-10/2017-01-17'
	],
	holidays: [
		'2017-12-25'
	],
	special: {
		birthdays: [
			'2017-01-01',
			'2017-04-30'
		]
	},
	templates: {
		..template overrides..
	},
	//format overrides/additions
	formats: {
		..format overrides..
	},
	//events you want bound
	events: {
		..you can bind events here or by using on() one() and off()..
	}
});

Events

All events are part of the Mk EventEmitter and *not* added to the DOM. Events are also called in context of the component instance so it isn't a great idea to use a proxy function to change context, as you'll loose a lot of beneficial object access.

change

Fires when datepicker value changes.


instance.on('change', function () {
	console.info('formated value:', this.value);
	console.info('raw date:', this.date);
});

activate

Fires when datepicker calendar date is "active".


instance.on('activate', function (el) {
	console.info('activated item is:', el);
});

show

Fires when datepicker calendar goes from hidden to visible.


instance.on('show', function (el) {
	console.infO('calendar is shown')
});

hide

Fires when datepicker calendar goes from visible to hidden.


instance.on('hide', function (el) {
	console.infO('calendar is hidden')
});

update

Fired when updates are made to the rendered UI through the use of update().


instance.on('update', function () {
	console.info('Changes to the native select have been applied to the UI.');
});

API

Below are the different public properties and methods accessible to you, the end developer. All of these are accessible on your Datepicker [dp] instance as well as inside event handlers bound to your instance. Some methods have intentionally been left out due to their difficulty tof use for end developers vs. internal use.

Methods

  • instance.unmount()

    Remove elements, data, events and references in instance to free up memory.

    • No params required.

  • instance.input(index)

    Get one of the native input elements by providing an index key.

    Parameters
    • Name
      index
      Type
      Element
      Description
      Element in the calendar UI to set as active.

  • instance.activate([day])

    Activate a specific date in the calendar UI.

    Parameters
    • Name
      day
      Type
      Element
      Description
      Element in the calendar UI to set as active.

  • instance.select(date[, silent])

    Manually set the date for the datepicker, update the calendar UI, and leverage the change event.

    Parameters
    • Name
      date
      Type
      String/Date object
      Description
      Native date string (yyyy-mm-dd) or Date object.
    • Name
      silent
      Type
      Boolean
      Description
      Set to true to disable the change event from emitting. Default is false.

  • instance.setDate(date[, inputnum])

    Manually set the date for the datepicker.

    Parameters
    • Name
      date
      Type
      Date object
      Description
      Date to be set.

  • instance.refresh([refocus])

    Refresh the calendar UI.

    Parameters
    • Name
      refocus
      Type
      Boolean
      Description
      Refocus keyboard interactions to the UI.

  • instance.moveMonth(up[, refocus])

    Move the calendar UI up or down a month.

    Parameters
    • Name
      up
      Type
      Boolean
      Description
      Moves the calendar either up or down a month.
    • Name
      refocus
      Type
      Boolean
      Description
      Refocus keyboard interactions to the UI.

  • instance.moveYear(up[, refocus])

    Move the calendar UI up or down a year.

    Parameters
    • Name
      up
      Type
      Boolean
      Description
      Moves the calendar either up or down a year.
    • Name
      refocus
      Type
      Boolean
      Description
      Refocus keyboard interactions to the UI.

  • instance.getValue(key[, date])

    Takes a key signifying day, date, month, or year and pulls the value from the date object.

    Parameters
    • Name
      key
      Type
      String
      Description
      Key representing part of a date (ie: m, d, or y).
    • Name
      date
      Type
      Date
      Description
      Date object to pull the value from. Default is internal date.

  • instance.format(format[, value])

    Takes a piece of a date format (ie: mm, yyyy, etc.) and formats the raw value.

    Parameters
    • Name
      format
      Type
      String
      Description
      Part of a date format.
    • Name
      value
      Type
      Number
      Description
      Number representing the value to be formatted. Default is value associated with the format on the internal Date object.

  • instance.format(format, value)

    Takes a piece of a date format (ie: mm, yyyy, etc.) and converts the value to a raw representation.

    Parameters
    • Name
      format
      Type
      String
      Description
      Part of a date format.
    • Name
      value
      Type
      String
      Description
      String representing the value to be formatted (ie: January).

  • instance.std(sdate[, format])

    Std (stringToDate) takes a date string and converts it to a Date object.

    Parameters
    • Name
      sdate
      Type
      String
      Description
      Date as string.
    • Name
      format
      Type
      String
      Description
      The format string to parse the correct date values from. Default is a native date format (yyyy-mm-dd).

  • instance.dts([date, format])

    Dts (dateToString) takes a Date object and convert it to a string.

    Parameters
    • Name
      date
      Type
      Date
      Description
      Date object to convert to string. Default is internal selected date.
    • Name
      format
      Type
      String
      Description
      format string to convert date to. Default is browser native (yyyy-mm-dd).

  • instance.disable()

    Disable the Datepicker UI.

    • No params required.

  • instance.enable()

    Enable the Datepicker UI.

    • No params required.

  • instance.show()

    In 'popup' mode, show the datepicker UI.

    • No params required.

  • instance.hide([refocus])

    In 'popup' mode, hide the datepicker UI.

    Parameters
    • Name
      refocus
      Type
      Boolean
      Description
      Pass as true to refocus tabbing to the trigger button.

  • instance.toggle([refocus])

    In 'popup' mode, toggle between show and hide.

    Parameters
    • Name
      refocus
      Type
      Boolean
      Description
      Pass as true to refocus tabbing to the trigger button.

  • instance.isHoliday([date])

    Check if a date is a holiday.

    Parameters
    • Name
      date
      Type
      String/Date
      Description
      Pass in a Date object, string, or nothing (defaults to this.date) to check if the date is a holiday. Holidays are provided by the end developer.

  • instance.isBlackout([date])

    Check if a date is a blackout date.

    Parameters
    • Name
      date
      Type
      String/Date
      Description
      Pass in a Date object, string, or nothing (defaults to this.date) to check if the date is a blackout date. Blackout dates are provided by the end developer.

  • instance.isSpecial(key[, date])

    Check if a date is a special date.

    Parameters
    • Name
      date
      Type
      Description

  • instance.isUnavailable([date])

    Check if a date is a blackout or outside the min/max limit.

    Parameters
    • Name
      date
      Type
      String/Date
      Description
      Pass in a Date object, string, or nothing (defaults to this.date) to check if the date is a blackout or past the min/max limit. Blackout dates are provided by the end developer.

  • instance.update()

    Make changes to the native date inputs and/or config settings and call this method for changes to reflect on the UI.

    Parameters
    • Name
      config
      Type
      Object
      Description
      Configuration object used to rewrite current properties..

Properties

  • instance.min

    Minimun date that can be selected as Date object.

  • instance.max

    Maximum date that can be selected as Date object.

  • instance.MIN

    Constant containing the MINIMUM past date possible in JavaScript (as time).

  • instance.MAX

    Constant containing the MAXIMUM past date possible in JavaScript (as time).

  • instance.formatmap

    Keeps friendly names for months and days of the week.

  • instance.holidays

    Array of date strings (in native format) or date objects which will provide a holiday identifier to the calendar ui. Default is empty array. Change prototype property to apply globally or through config for each instance.

  • instance.blackouts

    Array of date strings (in native format) or date objects which will disable selection abilities. Default is empty array. Change prototype property to apply globally or through config for each instance.

  • instance.special

    Array of date strings (in native format) or date objects which will run though a date matcher and apply a class name to the date UI day(s) in question. Change prototype property to apply globally or through config for each instance.

  • instance.uidate

    The current date in the calendar UI as a Date object.

  • instance.date

    The currently selected date as a Date object.

  • instance.disabled

    Is the datepicker disabled.

  • instance.enabled

    Is the datepicker enabled.

  • instance.isHidden

    Is the datepicker calendar UI hidden.

  • instance.isOpen

    Is the datepicker calendar UI visible.

  • instance.isPopup

    Is the datepicker calendar UI a popup or inline.

  • instance.value

    The currently selected date in native string format (yyyy-mm-dd). When using a start and end date, this property will be an array.

  • instance.inputs

    The input elements you provided inside the root datepicker node.

  • instance.trigger

    The button used to trigger (open/close) the datepicker UI.

  • instance.calendar

    The shadow calendar element.

  • instance.days

    Calendar day elements in the calendar table.

  • instance.controls

    The control buttons.

  • instance.heading

    The calendar heading.

  • instance.activeDay

    The active day in the calendar UI.