Props
format 1.0.0+
Type:
String
Default:
default value in "date" type is "YYYY-MM-DD"
default value in "datetime" type is "YYYY-MM-DD HH:mm"
default value in "time" type is "HH:mm"
default value in "date" type is "YYYY-MM-DD"
default value in "datetime" type is "YYYY-MM-DD HH:mm"
default value in "time" type is "HH:mm"
the format of the model value
inputFormat 1.0.0+
Type:
String
Default:
default value equal to the value of "type" prop
the format of the input value
displayFormat 1.0.0+
Type:
String
Default:
default value in "date" type is "?D ?MMMM"
default value in "datetime" type is "?D ?MMMM HH:mm"
default value in "time" type is "HH:mm"
default value in "date" type is "?D ?MMMM"
default value in "datetime" type is "?D ?MMMM HH:mm"
default value in "time" type is "HH:mm"
the format of the value that shows in the footer of picker
from 1.0.0+
Type:
String
Default:
default value in "date" and "datetime" type is "1300"
default value in "time" type is "00:00"
default value in "date" and "datetime" type is "1300"
default value in "time" type is "00:00"
Example:
"1400/7/1" | "1400-7"
the date of start of the picker
to 1.0.0+
Type:
String
Default:
default value in "date" and "datetime" type is "1499"
default value in "time" type is "23:59"
default value in "time" type is "23:59"
Example:
"1400/7/1" | "1400-7"
the date of end of the picker
show 1.0.0+
Type:
Boolean
Default:
false
show or hide the picker
clickOn 1.0.0+
Type:
String
Default:
"all"
Values:
"all" | "input" | "icon" | "none"
show the picker with click on the some sections
modal 1.0.0+
Type:
Boolean
Default:
false
show the picker in modal mode
label 1.0.0+
Type:
String
text for label tag
column 1.0.0+
Type:
Object | Number
Default:
{ 576: 1 }
Description:
1. you can send the number of column or send the object of the number of column in the breakpoint.
2. if the breaking point in the object is not specified, the default value it's 2
1. you can send the number of column or send the object of the number of column in the breakpoint.
2. if the breaking point in the object is not specified, the default value it's 2
number of column
autoSubmit 1.0.0+
Type:
Boolean
Default:
true
submit when date selected or not
mode 1.0.0+
Type:
String
Default:
"range"
Values:
"range" | "single"
mode of select date
locale 2.0.0+
Type:
String
Default:
"fa"
Values:
"fa" | "en" | "fa,en" | "en,fa"
Description:
Except above values, you can add the language in "localeConfig" prop and use it.
Except above values, you can add the language in "localeConfig" prop and use it.
the locale of datepicker
clearable 2.0.0+
Type:
Boolean
Default:
false
user can clear the selected dates or not
disable 2.0.0+
Type:
Array | String | Function | RegExp
disable some dates or time
type 2.0.0+
Type:
String
Default:
"date"
Values:
"date" | "time" | "datetime"
the type of picker
localeConfig 2.0.0+
Type:
Object
Example:
{
fa: {
calendar: "jalali", // "jalali" | "gregorian"
weekdays: ["ش", "ی", "د", "س", "چ", "پ", "ج"],
months: ["فروردین", "اردیبهشت", "خرداد", "تیر", "مرداد", "شهریور", "مهر", "آبان", "آذر", "دی", "بهمن", "اسفند"],
dir: {
input: "rtl", // "rtl" | "ltr"
picker: "rtl", // "rtl" | "ltr"
},
translations: {
label: "شمسی",
picker: "تقویم شمسی",
prevMonth: "ماه قبل",
nextMonth: "ماه بعد",
now: "هم اکنون",
submit: "تایید",
/* The below properties uses in shortcuts. If you don't use the shortcuts, ignore them. */
// date-single
yesterday: "دیروز",
tomorrow: "فردا",
firstOfWeek: "اول هفته",
lastOfWeek: "آخر هفته",
// date-range
thisWeek: "این هفته",
prevWeek: "هفته قبل",
nextWeek: "هفته بعد",
thisMonth: "این ماه",
// time-single
oneHourAgo: "یک ساعت قبل",
oneHourLater: "یک ساعت بعد",
midnight: "نیمه شب",
midday: "نیمروز",
// time-range
thisHour: "این ساعت",
prevHour: "ساعت قبل",
nextHour: "ساعت بعد",
allDay: "تمام روز"
},
inputFormat: 'jYYYY/jMM/jDD',
displayFormat: 'jD jMMMM',
}
}
the config for locales
styles 2.0.0+
Type:
Object
Example:
{
"primary-color": "#26baee", // primary color of component
"secondary-color": "#9fe8fa", // secondary color of component
"in-range-background": "#c9f1fb", // background-color of dates between start and end of range
"icon-background": "#e9ecef", // background-color of icon
"text-color": "#495057", // color of texts and numbers
"hover-color": "#000", // color of hovered dates
"border-color": "#ced4da", // color of border
"z-index": 1000, // z-index of picker
"disabled-opacity": 0.3, // the opacity of disabled dates
"overlay-color": "transparent", // color of overlay
"main-box-shadow": "1px 1px 8px 1px rgba(116, 116, 116, 0.5)", // box-shadow of picker
"day-dimensions": "2.08rem", // width and height of dates
radius: "0.25rem", // border-radius of dates
background: "#fff", // background-color of picker
}
the styles of the picker
color 2.0.0+
Type:
String
Values:
"red" | "pink" | "orange" | "green" | "purple" | "gray"
the color of the picker
shortcut 2.2.0+
Type:
Boolean | Object
Default:
false
shortcut for select date and time quickly