The Date picker provides an easy way to handle date selection.

Example Usage

const url = await webview.datePicker.create({
  ref: 'pickup-date',
  title: 'Choose a pick up date',
  onSelect: {
    eventName: 'pick date',
    paramName: 'date'
  }
})

Properties

Property	Type	Example	Description	Required
`ref`	`string`	pickup-date	If provided, the webview will update it's content
`title`	`string`	Choose a date...	Descriptive titles shown in the top	Yes
`tint`	`string`	`#FF0000`	Tint color used for the buttons
`button.label`	`string`	Choose date	Label of the confirmation button
`onSelect.eventName`	`string`	`Date selected`	Event name to trigger when selection is made	Yes
`onSelect.paramName`	`string`	`pickupDate`	Optional name to use for the parameter that will contain the selected date

Calendar properties

Parameter	Type	Default	Description
`value`	`array`		Array with initial selected dates. Each array item represents the selected date
`disabled`	`Date Range`		Additional disabled dates. The parameter accepts the so-called Date Range (look below for details)
`events`	`Date Range`		Dates with events. It will be marked with an additional "dot" on the calendar day. The parameter accepts so-called Date Range (look below for details)
`monthNames`	`array`	`['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August' , 'September' , 'October', 'November', 'December']`	Array with full month names
`monthNamesShort`	`array`	`['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']`	Array with short month names
`dayNames`	`array`	`['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']`	Array with week day names
`dayNamesShort`	`array`	`['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']`	Array with week day short names
`firstDay`	`number`	`1`	First day of the week. By default 1 - Monday
`weekendDays`	`array`	`[0,6]`	Array with index number of weekend days, by default it is Saturday and Sunday
`dateFormat`	`string`	`yyyy-mm-dd`	Default date format, available expressions:'yyyy' - 4 digits year'yy' - 2 digits year'mm' - 2 digits month number, from 01 to 12'm' - month number, from 1 to 12'MM' - full month name'M' - short month name 'dd' - 2 digits day number, from 01 to 31'd' - day number, from 1 to 31'DD' - full week day name 'D' - short week day name
`multiple`	`boolean`	`false`	Enable to allows select multiple dates/values
`rangePicker`	`boolean`	`false`	Enable to enable range picker. Not compatible with multiple
`rangePickerMinDays`	`number`	`1`	Minimum days that need to be selected when rangePicker enabled
`rangePickerMaxDays`	`number`	`0`	Maximum days allowed to be selected when rangePicker enabled. 0 means no maximum
`direction`	`string`	`horizontal`	Months layout direction, could be 'horizontal' or 'vertical'
`minDate`	`Date`	`null`	Minimum allowed date
`maxDate`	`Date`	`null`	Maximum allowed date
`weekHeader`	`boolean`	`true`	Enable week header with short name week days
`monthSelector`	`boolean`	`true`	Enable month selector in toolbar
`yearSelector`	`boolean`	`true`	Enable year picker in toolbar

More details

Date Range

Some of the Calendar parameters (disabled, events) accept a so-called Date Range. It is a simple way to specify and cover all possible date combinations.

It can be array with dates, for example:

...
  // Disable all dates between 1st October 2015 and 31 December 2015
  disabled: {
    from: new Date(2015, 9, 1),
    to: new Date(2015, 11, 31)
  }
  ...

Or array with mixed dates and objects:

...
  events: [
    new Date(2015, 9, 1),
    new Date(2015, 9, 5),
    {
        from: new Date(2015, 9, 10),
        to: new Date(2015, 9, 15)
    },
    {
        from: new Date(2015, 9, 20),
        to: new Date(2015, 9, 31)
    },
    {
        date: new Date(2015, 11, 1),
        color: '#ff0000'
    }
  ]
  ...

Date Events

If you want to indicate that day has few different events, it is possible to indicate this with multiple different color dots. In this case, you need to pass date range as array where each object will have date and color properties

...
  events: [
    new Date(2015, 9, 1),
    new Date(2015, 9, 5),
    {
        from: new Date(2015, 9, 10),
        to: new Date(2015, 9, 15)
    },
    {
        from: new Date(2015, 9, 20),
        to: new Date(2015, 9, 31)
    },
    {
        date: new Date(2015, 11, 1),
        color: '#ff0000'
    },
    // same date but one more color dot will be added
    {
        date: new Date(2015, 11, 1),
        color: '#00ff00'
    },
  ]
  ...