Quriobot AcademyCan I put some advanced functionality such as dynamic min/max dates or disabling weekends to the Date/Time steps?
Yes, you can. If you enabled developer mode just use these simple solutions in the step settings advanced section Dynamic settings field.
There are available settings to set dynamically:
| Option | Type | Default | Description |
|---|---|---|---|
| disable | Array | [ “function(date){return (date.getDay() === 5 || date.getDay() === 6)}”, “2025-01-30”, ] | If you’d like to make certain dates unavailable for selection, there are multiple methods of doing so. 1. Disabling specific date 2. Disabling a date range 3. Disabling dates using a function more info |
| enable | Array | [ “function(date){return (date.getDay() === 1 || date.getDay() === 2)}”, ] | This is the enable option, which takes in an array of date strings, date ranges and functions. Essentially the same as the disable option above, but reversed.more info |
| minDate | String/Date | “today” | The minimum date that a user can start picking from (inclusive). Overrides the value from the Start date field |
| maxDate | String/Date | null | The maximum date that a user can pick to (inclusive). Overrides the value from the End date field |
| minTime | Date | null | The minimum time that a user can start picking from (inclusive) |
| maxTime | Date | null | The maximum time that a user can start picking from (inclusive) |
| defaultHour | Integer | 12 | The initial value of the hour element. |
| defaultMinute | Integer | 0 | The initial value of the hour element. |
| getTimeLimits | String | null | Function to provide the dynamic time limits depending on the selected date |
| defaultDate | Date, Array of Date, String | null | Sets the initial selected date(s). If you’re using mode: "multiple" or a range calendar supply an Array of Date objects or an Array of date strings which follow your dateFormat.Otherwise, you can supply a single Date object or a date string. In case of the time step type, it’s a time string in the format: “HH:mm” |
| minuteIncrement | Integer | 5 | Adjusts the step for the minute input (incl. scrolling) |
| hourIncrement | Integer | 1 | Adjusts the step for the hour input (incl. scrolling) |
Advanced conditions for the disabled/enabled dates and times
Sometimes you need to enable or disable certain days in a certain week of the month.
For this, there’s a utility function available:
quriobot.isGivenDateOfMonth(startDate, dayOfWeek, weekNumber).
Where:
- startDate - date to check
- dayOfWeek - number of the day of the week, starting with 1 - Monday
- weekNumber- number of the week, starting with 1
For example, if you need to disable the first and third Fridays, Saturdays, and Sundays of the month but also second and fourth Mondays, Saturdays, and Sundays of the month, the condition would look like this:
function(getVariableValue, callback) {
callback({
//Makes certain dates unavailable for selection
"disable": [
// first Friday
"function(date){return quriobot.isGivenDateOfMonth(date, 5, 1) && date.getDay() === 5}",
// first Saturday
"function(date){return quriobot.isGivenDateOfMonth(date, 6, 1) && date.getDay() === 6}",
// first Sunday
"function(date){return quriobot.isGivenDateOfMonth(date, 7, 1) && date.getDay() === 0}",
// third Friday
"function(date){return quriobot.isGivenDateOfMonth(date, 5, 3) && date.getDay() === 5}",
// third Saturday
"function(date){return quriobot.isGivenDateOfMonth(date, 6, 3) && date.getDay() === 6}",
// third Sunday
"function(date){return quriobot.isGivenDateOfMonth(date, 7, 3) && date.getDay() === 0}",
// second Monday
"function(date){return quriobot.isGivenDateOfMonth(date, 1, 2) && date.getDay() === 1}",
// second Saturday
"function(date){return quriobot.isGivenDateOfMonth(date, 6, 2) && date.getDay() === 6}",
// second Sunday
"function(date){return quriobot.isGivenDateOfMonth(date, 7, 2) && date.getDay() === 0}",
// fourth Monday
"function(date){return quriobot.isGivenDateOfMonth(date, 1, 4) && date.getDay() === 1}",
// fourth Saturday
"function(date){return quriobot.isGivenDateOfMonth(date, 6, 4) && date.getDay() === 6}",
// fourth Sunday
"function(date){return quriobot.isGivenDateOfMonth(date, 7, 4) && date.getDay() === 0}"
]
})
}
Another example for the advanced conditions would be to disable Friday, Saturday, Sunday for the even week of the year, but disable Monday, Saturday, Sunday for the odd week of the year:
function(getVariableValue, callback) {
callback({
//Makes certain dates unavailable for selection
"disable": [
// even week of the month - Friday
"function(date){return moment(date).week() % 2 === 0 && date.getDay() === 5}",
// even week of the month - Saturday
"function(date){return moment(date).week() % 2 === 0 && date.getDay() === 6}",
// even week of the month - Sunday
"function(date){return moment(date).week() % 2 === 0 && date.getDay() === 0}",
// odd week of the month - Monday
"function(date){return moment(date).week() % 2 !== 0 && date.getDay() === 1}",
// odd week of the month - Saturday
"function(date){return moment(date).week() % 2 !== 0 && date.getDay() === 6}",
// odd week of the month - Sunday
"function(date){return moment(date).week() % 2 !== 0 && date.getDay() === 0}"
]
})
}