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 selected date
disabled
Date Range
Additional disabled dates. Parameter accepts so called Date Range (look below for details)
events
Date Range
Dates with events. Will be marked with additional "dot" on calendar day. 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 Calendar parameters (disabled, events) accept a so called Date Range. It is a simple way to specify and cover all possible dates combination.
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'
},
]
...
View full article