Skip to content

Dates & calendrier

Contrôles segmentés (UInputDate / UInputTime) ou calendrier déplié (UCalendar).


Date / Date-time / Time — champs segmentés

Activation :

  • schema format: "date" | "date-time" | "time", ou
  • options.format: "date" | "time" | "date-time"

API

NameTypeDefaultDescription
format"date" | "time" | "date-time"(schema)Type de contrôle si le schema n’a pas de format.
patternStringselon formatFormat dayjs de stockage / affichage (YYYY-MM-DD, HH:mm, YYYY.MM, YYYY, …).
localeString"fr-FR"Locale du calendrier popover.
monthsNumberNombre de mois affichés dans le popover.
weekNumbersBooleanAffiche les numéros de semaine.
minDateStringBorne min inclusive (YYYY-MM-DD, YYYY-MM ou YYYY).
maxDateStringBorne max inclusive.
disabledDatesString[]Jours exclus (YYYY-MM-DD).
disabledWeekdaysNumber[]Jours de semaine exclus (0 = dimanche … 6 = samedi).
disabledMonthsNumber[]Mois exclus (112).
disabledYearsNumber[]Années exclues.
inputDateObjectPass-through → UInputDate.
inputTimeObjectPass-through → UInputTime.
calendarObjectPass-through → calendrier du popover.
calendarCardObjectPass-through carte calendrier.
timeCard / timeHour / timeMinute / timeSecondObjectPass-through parties heure.

Exemples

json
{
  "type": "string",
  "format": "date",
  "title": "Date de début"
}
json
{
  "type": "Control",
  "scope": "#/properties/startDate",
  "options": {
    "pattern": "YYYY-MM-DD",
    "locale": "fr-FR",
    "minDate": "2026-01-01",
    "maxDate": "2026-12-31",
    "disabledWeekdays": [0, 6]
  }
}

Précision mois / année :

json
{
  "type": "Control",
  "scope": "#/properties/period",
  "options": {
    "format": "date",
    "pattern": "YYYY-MM"
  }
}

Heure seule :

json
{
  "type": "Control",
  "scope": "#/properties/opening",
  "options": {
    "format": "time",
    "pattern": "HH:mm"
  }
}

Calendar — UCalendar déplié

Activation : options.format: "calendar".

API

Toutes les contraintes de dates ci-dessus (minDate, disabledDates, …) plus :

NameTypeDefaultDescription
format"calendar"Requis.
rangeBooleanSélection de plage { start, end } (schema object recommandé).
monthsNumber2 si rangeNombre de mois côte à côte.
calendarObjectPass-through → UCalendar.

Exemples

Calendrier simple :

json
{
  "type": "Control",
  "scope": "#/properties/day",
  "options": {
    "format": "calendar",
    "weekNumbers": true
  }
}

Plage avec contraintes :

json
{
  "type": "object",
  "properties": {
    "start": { "type": "string", "format": "date" },
    "end": { "type": "string", "format": "date" }
  }
}
json
{
  "type": "Control",
  "scope": "#/properties/stay",
  "options": {
    "format": "calendar",
    "range": true,
    "months": 2,
    "minDate": "2026-08-01",
    "maxDate": "2026-09-30",
    "disabledWeekdays": [0, 6],
    "disabledDates": ["2026-08-15"]
  }
}

Playground

Publié sous licence BSD-3-Clause.