The Date Picker lets you easily add date selection functionality to your webview.

Example Usage

The following code snippet shows how to create a Date Picker:

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

In this example, the Date Picker is given a reference ID (ref), a title that appears at the top, and an onSelect configuration that specifies which event to trigger when a date is chosen.

Properties

Property	Type	Example	Description
`ref`	`string`	pickup-date	Optional. If provided, the webview will update its content.
`title`	`string`	Choose a date...	Required. The title shown at the top of the webview.
`tint`	`string`	`#FF0000`	Optional. The tint color applied to the buttons.
`button.label`	`string`	Choose date	Optional. The text displayed on the confirmation button.
`onSelect.eventName`	`string`	`Date selected`	Required. The name of the event that will be triggered when a selection is made.
`onSelect.paramName`	`string`	`pickupDate`	Optional. The name of the parameter that will hold the selected date.

Calendar properties

These parameters allows you to customize the calendar’s behavior and appearance:

Parameter	Type	Default	Description
`value`	`array`	NA	An array of dates that are initially selected.
`disabled`	`Date Range`	NA	Specifies dates that should be disabled (unavailable for selection). Accepts a Date Range (see Date Range below).
`events`	`Date Range`	NA	Specifies dates that have events. These dates are marked with an extra dot on the calendar. Accepts a Date Range (see Date Range below).
`monthNames`	`array`	`['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August' , 'September' , 'October', 'November', 'December']`	An array of full month names.
`monthNamesShort`	`array`	`['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']`	An array of abbreviated month names.
`dayNames`	`array`	`['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']`	An array of full weekday names.
`dayNamesShort`	`array`	`['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']`	An array of abbreviated weekday names.
`firstDay`	`number`	`1`	The first day of the week. By default, `1` is Monday.
`weekendDays`	`array`	`[0,6]`	The index numbers for weekend days. `[0,6]` indicated Saturday and Sunday.
`dateFormat`	`string`	`yyyy-mm-dd`	Defines the format of the displayed date. Available expressions: `yyyy` – 4-digit year `yy` – 2-digit year `mm` – 2-digit month (01 to 12) `m` – month number (1 to 12) `MM` – full month name `M` – abbreviated month name `dd` – 2-digit day (01 to 31) `d` – day number (1 to 31) `DD` – full weekday name `D` – abbreviated weekday name
`multiple`	`boolean`	`false`	Allow the selection of multiple dates.
`rangePicker`	`boolean`	`false`	Enable a range selection mode. Note: This is not compatible with multiple date selection.
`rangePickerMinDays`	`number`	`1`	The minimum number of days that must be selected when using range mode.
`rangePickerMaxDays`	`number`	`0`	The maximum number of days that can be selected in range mode. Use `0` for no maximum.
`direction`	`string`	`horizontal`	The layout direction for the calendar months.
`minDate`	`Date`	`null`	The earliest selectable date.
`maxDate`	`Date`	`null`	The latest selectable date.
`weekHeader`	`boolean`	`true`	Enable a header row displaying abbreviated weekday names.
`monthSelector`	`boolean`	`true`	Enable a month selector in the toolbar.
`yearSelector`	`boolean`	`true`	Enable a year picker in the toolbar.

More details

Date Range {#date-range}

Certain calendar properties (like disabled and events) accept a Date Range. This feature allows you to specify a group of dates using simple objects.

Example: Disable a Range of Dates

To disable all dates from September 1, 2015 to November 31, 2015, use:

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

Example: Mixed Date Range for Events

You can also mix individual dates with ranges:

...
  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

You can add more than one colored dot to indicate multiple events. To do this, include multiple event objects with 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'
    },
  ]
  ...

In this case, November 1, 2015 shows two dots (one red and one green) to indicate multiple events.