arengibook 3.1.6-datepicker → 3.1.8-datepicker

package/dist/index.js

@@ -13170,7 +13170,7 @@ var LOCALES = {
 var css_248z$1 = "@charset \"UTF-8\";\n/* Variables couleurs */\n/* Force une largeur à 100% de l'input Calendar */\n.datepicker-fullwidth {\n  width: 100%;\n}\n\n.datepicker-fullwidth > .dp-input-wrapper {\n  width: 100%;\n}\n.datepicker-fullwidth > .dp-input-wrapper > .p-calendar {\n  width: 100%;\n}\n\n.dp-input-wrapper {\n  position: relative;\n  display: inline-flex;\n}\n.dp-input-wrapper .dp-clear-btn {\n  position: absolute;\n  right: 0.5rem;\n  top: 50%;\n  transform: translateY(-50%);\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 0.2rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #aaa;\n  z-index: 1;\n  border-radius: 50%;\n  line-height: 1;\n}\n.dp-input-wrapper .dp-clear-btn:hover {\n  color: #555;\n  background-color: rgba(0, 0, 0, 0.06);\n}\n.dp-input-wrapper .dp-clear-btn .pi {\n  font-size: 0.65rem;\n}\n\n.p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {\n  outline: 0 none;\n  outline-offset: 0;\n  box-shadow: 0 0 0 0.2rem #a5f3fc;\n  border-color: #06b6d4;\n}\n\n/* Panel invisible jusqu'au repositionnement (évite le flash position basse → haute) */\n.datepickerbook:not(.dp-ready) {\n  visibility: hidden !important;\n}\n\n/* Neutralise les styles hérités */\n.datepickerbook table,\n.datepickerbook tbody,\n.datepickerbook tr,\n.datepickerbook td,\n.datepickerbook th {\n  background-color: unset !important;\n  color: inherit !important;\n  border: none;\n}\n\n/* Restaure les couleurs et l'entete du calendrier  */\n.datepickerbook .p-datepicker {\n  background-color: #fff !important;\n  color: #333 !important;\n  border-radius: 6px;\n  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);\n}\n\n.datepickerbook .datepicker-custom-header {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  padding: 0.5rem 0.75rem;\n}\n\n.datepickerbook .datepicker-spinner {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  font-size: 0.85rem;\n}\n\n.datepickerbook .dp-label {\n  margin: 0.25rem 0;\n  font-weight: 500;\n}\n\n.p-datepicker .p-datepicker-title,\n.p-datepicker .p-datepicker-prev,\n.p-datepicker .p-datepicker-next {\n  display: none !important;\n}\n\n.datepickerbook .p-datepicker-header {\n  justify-content: center;\n}\n\n.datepickerbook .dp-popup {\n  position: absolute;\n  top: 100%;\n  margin-top: 0.25rem;\n  background: #fff;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n  padding: 0.25rem;\n  z-index: 10;\n}\n\n.datepickerbook .dp-popup-months,\n.datepickerbook .dp-popup-years {\n  display: grid;\n  grid-template-columns: repeat(3, auto);\n  gap: 0.25rem;\n}\n\n.datepickerbook .dp-popup-item {\n  border: none;\n  background: transparent;\n  padding: 0.15rem 0.4rem;\n  cursor: pointer;\n  font-size: 0.8rem;\n}\n\n.datepickerbook .dp-popup-item:hover {\n  background: #eee;\n}\n\n/*.datepickerbook .dp-header-top {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: 0.75rem;\n}*/\n.datepickerbook .dp-header-part {\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n\n.datepickerbook .dp-label-button {\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  font-weight: 800;\n  font-size: 16px;\n  margin: 0.25rem 0;\n}\n\n.datepickerbook.dp-monthyear-mode .dp-monthyear-header {\n  padding-bottom: 0.25rem;\n}\n\n.datepickerbook {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  margin-bottom: 0.25rem;\n}\n\n.datepickerbook .dp-back-button {\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  font-size: 0.9rem;\n}\n\n.datepickerbook .dp-title {\n  font-weight: 600;\n  font-size: 0.9rem;\n}\n\n/* Colonnes mois / années */\n.datepickerbook .dp-header-lists {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 0.5rem;\n}\n\n.datepickerbook .dp-month-list,\n.datepickerbook .dp-year-list {\n  padding-right: 0.25rem;\n  display: flex;\n  flex-direction: column;\n  gap: 0.15rem;\n}\n\n.datepickerbook .dp-list-item:hover {\n  background: #f0f0f0;\n}\n\n.p-datepicker-header.datepicker-custom-header.dp-monthyear-header {\n  margin: auto;\n}\n\n/*.p-monthpicker*/\n.p-datepicker.dp-monthyear-mode {\n  box-shadow: none !important;\n  border-radius: 0px;\n}\n.p-datepicker.dp-monthyear-mode .dp-header-top-alt {\n  display: none !important;\n}\n\n.p-datepicker-monthpicker.dp-monthyear-mode {\n  box-shadow: none !important;\n  border-radius: 0px;\n}\n.p-datepicker-monthpicker.dp-monthyear-mode .dp-header-top-alt {\n  display: none !important;\n}\n\n.p-datepicker {\n  width: 331px !important;\n  min-width: 331px !important;\n  max-width: 331px !important;\n}\n.p-datepicker .dp-arrow {\n  border: none;\n  background-color: transparent;\n  color: rgba(0, 0, 0, 0.3137254902);\n  cursor: pointer;\n}\n.p-datepicker .dp-arrow:hover {\n  color: #06B6D4;\n  background-color: rgba(165, 243, 252, 0.3137254902);\n}\n.p-datepicker.dp-year-only {\n  box-shadow: none !important;\n  width: auto !important;\n  min-width: unset !important;\n  max-width: unset !important;\n}\n.p-datepicker.dp-year-only .dp-header-top-alt {\n  display: none !important;\n}\n.p-datepicker.dp-year-only .dp-monthyear-header {\n  width: 205px;\n  min-width: 205px;\n  max-width: 205px;\n}\n.p-datepicker.dp-year-only .dp-monthyear-header .dp-year-container {\n  width: 100%;\n}\n.p-datepicker.dp-year-only .dp-year-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: space-between;\n}\n.p-datepicker.dp-year-only .dp-year-container .dp-arrow-container {\n  width: 100%;\n  border-top: 1px solid #eaeaea;\n  height: 51px;\n  display: flex;\n  align-items: center;\n}\n.p-datepicker.dp-year-only .dp-year-container .dp-arrow-container .dp-arrow-up {\n  border-right: 1px solid #eaeaea;\n  border-radius: 0px 0px 0px 5px !important;\n}\n.p-datepicker.dp-year-only .dp-year-container .dp-arrow-container .dp-arrow-down {\n  border-radius: 0px 0px 5px 0px !important;\n}\n.p-datepicker.dp-year-only .dp-year-container .dp-arrow-container .dp-arrow-year {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 49%;\n  border-radius: 0px;\n  flex: 1;\n}\n.p-datepicker.dp-year-only .dp-year-container .dp-arrow-container .dp-arrow-year:hover {\n  background-color: rgba(165, 243, 252, 0.3137254902);\n}\n.p-datepicker.dp-year-only .dp-year-container .dp-year-list {\n  width: 100%;\n  gap: 0px;\n  padding: 0px;\n}\n.p-datepicker.dp-year-only .dp-year-container .dp-list-item-active {\n  width: 100%;\n  color: #ffffff !important;\n  background-color: #06B6D4 !important;\n  border-bottom: 1px solid #06B6D4 !important;\n  font-weight: 600;\n}\n.p-datepicker.dp-year-only .dp-year-container .dp-list-item {\n  background-color: transparent;\n  border: none;\n  color: black;\n  transition: 0s !important;\n  height: 25px;\n  font-size: 16px;\n  border-radius: 0px;\n  border-bottom: 1px solid #eaeaea;\n  width: 100%;\n}\n.p-datepicker.dp-year-only .dp-year-container .dp-list-item:not(.dp-list-item-big) {\n  padding: 3px 10px !important;\n}\n.p-datepicker.dp-year-only .dp-year-container .dp-list-item:not(.dp-list-item-big):hover {\n  background-color: rgba(165, 243, 252, 0.3137254902) !important;\n  color: #06B6D4;\n}\n.p-datepicker.dp-year-only .dp-year-container .dp-list-item {\n  padding: 3px 10px;\n  transition: background 0.2s;\n}\n\n.dp-monthyear-mode .p-datepicker-group, .p-datepicker-monthpicker .p-datepicker-group, .dp-year-only .p-datepicker-group {\n  padding: 0px !important;\n  border: 0px solid transparent !important;\n}\n.dp-monthyear-mode .dp-monthyear-header, .p-datepicker-monthpicker .dp-monthyear-header, .dp-year-only .dp-monthyear-header {\n  justify-content: flex-start;\n  gap: 0;\n  background: linear-gradient(45deg, #ffffff, #ffffff);\n  border: 1px solid rgba(255, 255, 255, 0.3294117647);\n  border-radius: 8px;\n  position: absolute;\n  top: 0;\n  left: 0;\n  padding: 0px !important;\n  width: 331px;\n  min-width: 331px;\n  max-width: 331px;\n}\n.dp-monthyear-mode .dp-header-top-alt, .p-datepicker-monthpicker .dp-header-top-alt, .dp-year-only .dp-header-top-alt {\n  width: 100%;\n  height: 50px !important;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  border-bottom: 1px solid #eaeaea;\n}\n.dp-monthyear-mode .dp-header-top-alt .dp-header-top-alt-part:first-child, .p-datepicker-monthpicker .dp-header-top-alt .dp-header-top-alt-part:first-child, .dp-year-only .dp-header-top-alt .dp-header-top-alt-part:first-child {\n  border-right: 1px solid #eaeaea;\n}\n.dp-monthyear-mode .dp-header-top-alt .dp-header-top-alt-part, .p-datepicker-monthpicker .dp-header-top-alt .dp-header-top-alt-part, .dp-year-only .dp-header-top-alt .dp-header-top-alt-part {\n  width: 49%;\n  height: 50px;\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-weight: 600;\n  color: black;\n  font-size: 16px;\n  text-transform: capitalize;\n}\n.dp-monthyear-mode .p-datepicker-calendar-container, .p-datepicker-monthpicker .p-datepicker-calendar-container, .dp-year-only .p-datepicker-calendar-container {\n  display: none;\n}\n.dp-monthyear-mode .dp-actions, .p-datepicker-monthpicker .dp-actions, .dp-year-only .dp-actions {\n  width: 100%;\n  background-color: white;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  border-radius: 0px 0px 5px 5px;\n  padding: 0px 10px 10px 10px;\n}\n.dp-monthyear-mode .dp-actions .p-button:first-child, .p-datepicker-monthpicker .dp-actions .p-button:first-child, .dp-year-only .dp-actions .p-button:first-child {\n  border: 0px solid transparent;\n  color: #06B6D4;\n}\n.dp-monthyear-mode .dp-actions .p-button:last-child, .p-datepicker-monthpicker .dp-actions .p-button:last-child, .dp-year-only .dp-actions .p-button:last-child {\n  background-color: white;\n  border: 1px solid #06B6D4;\n  color: #06B6D4;\n}\n.dp-monthyear-mode .dp-actions .p-button:last-child:hover, .p-datepicker-monthpicker .dp-actions .p-button:last-child:hover, .dp-year-only .dp-actions .p-button:last-child:hover {\n  background-color: #06B6D4;\n  color: white;\n}\n.dp-monthyear-mode .dp-actions .p-button, .p-datepicker-monthpicker .dp-actions .p-button, .dp-year-only .dp-actions .p-button {\n  padding: 10px 15px;\n}\n.dp-monthyear-mode .dp-actions .p-button .p-button-icon, .p-datepicker-monthpicker .dp-actions .p-button .p-button-icon, .dp-year-only .dp-actions .p-button .p-button-icon {\n  display: none;\n}\n.dp-monthyear-mode .dp-header-lists, .p-datepicker-monthpicker .dp-header-lists, .dp-year-only .dp-header-lists {\n  width: calc(100% - 20px);\n  height: 300px;\n  display: flex;\n  align-items: flex-start;\n  gap: initial;\n  padding: 0px;\n  margin: 10px;\n}\n.dp-monthyear-mode .dp-month-list, .p-datepicker-monthpicker .dp-month-list, .dp-year-only .dp-month-list {\n  transition: none !important;\n  border: 1px solid #eaeaea;\n  margin: 0px 10px 0px 0px !important;\n  gap: 0px;\n}\n.dp-monthyear-mode .dp-month-list .dp-list-item-active, .p-datepicker-monthpicker .dp-month-list .dp-list-item-active, .dp-year-only .dp-month-list .dp-list-item-active {\n  width: 100%;\n  color: #fff !important;\n  background-color: #06B6D4 !important;\n  border-bottom: 1px solid #06B6D4 !important;\n  font-weight: 600;\n}\n.dp-monthyear-mode .dp-month-list .dp-list-item, .p-datepicker-monthpicker .dp-month-list .dp-list-item, .dp-year-only .dp-month-list .dp-list-item {\n  border: none;\n  height: 25px;\n  background-color: transparent;\n  font-size: 16px;\n  text-transform: capitalize;\n  border-radius: 0px;\n  margin: 0px;\n  padding: 3px;\n  width: calc(100% - 0px);\n  border-bottom: 1px solid #eaeaea;\n}\n.dp-monthyear-mode .dp-month-list .dp-list-item:hover, .p-datepicker-monthpicker .dp-month-list .dp-list-item:hover, .dp-year-only .dp-month-list .dp-list-item:hover {\n  background-color: rgba(165, 243, 252, 0.3137254902);\n}\n.dp-monthyear-mode .dp-month-list .dp-list-item:last-child, .p-datepicker-monthpicker .dp-month-list .dp-list-item:last-child, .dp-year-only .dp-month-list .dp-list-item:last-child {\n  border: none;\n}\n.dp-monthyear-mode .dp-year-container, .p-datepicker-monthpicker .dp-year-container, .dp-year-only .dp-year-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: space-between;\n  border: 1px solid #eaeaea;\n}\n.dp-monthyear-mode .dp-year-container .dp-arrow-container, .p-datepicker-monthpicker .dp-year-container .dp-arrow-container, .dp-year-only .dp-year-container .dp-arrow-container {\n  width: 100%;\n  border-top: 1px solid #eaeaea;\n  height: 51px;\n  display: flex;\n  align-items: center;\n}\n.dp-monthyear-mode .dp-year-container .dp-arrow-container .dp-arrow-up, .p-datepicker-monthpicker .dp-year-container .dp-arrow-container .dp-arrow-up, .dp-year-only .dp-year-container .dp-arrow-container .dp-arrow-up {\n  border-right: 1px solid #eaeaea;\n}\n.dp-monthyear-mode .dp-year-container .dp-arrow-container .dp-arrow-year, .p-datepicker-monthpicker .dp-year-container .dp-arrow-container .dp-arrow-year, .dp-year-only .dp-year-container .dp-arrow-container .dp-arrow-year {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 49%;\n  border-radius: 0px;\n  flex: 1;\n}\n.dp-monthyear-mode .dp-year-container .dp-year-list, .p-datepicker-monthpicker .dp-year-container .dp-year-list, .dp-year-only .dp-year-container .dp-year-list {\n  width: 100%;\n  gap: 0px;\n  padding: 0px;\n}\n.dp-monthyear-mode .dp-year-container .dp-list-item-active, .p-datepicker-monthpicker .dp-year-container .dp-list-item-active, .dp-year-only .dp-year-container .dp-list-item-active {\n  width: 100%;\n  color: #ffffff !important;\n  background-color: #06B6D4 !important;\n  border-bottom: 1px solid #06B6D4 !important;\n  font-weight: 600;\n}\n.dp-monthyear-mode .dp-year-container .dp-list-item, .p-datepicker-monthpicker .dp-year-container .dp-list-item, .dp-year-only .dp-year-container .dp-list-item {\n  background-color: transparent;\n  border: none;\n  color: black;\n  transition: 0s !important;\n  height: 25px;\n  font-size: 16px;\n  border-radius: 0px;\n  border-bottom: 1px solid #eaeaea;\n  width: 100%;\n  padding: 3px 10px;\n}\n.dp-monthyear-mode .dp-year-container .dp-list-item:not(.dp-list-item-big), .p-datepicker-monthpicker .dp-year-container .dp-list-item:not(.dp-list-item-big), .dp-year-only .dp-year-container .dp-list-item:not(.dp-list-item-big) {\n  padding: 3px 10px !important;\n}\n.dp-monthyear-mode .dp-year-container .dp-list-item:not(.dp-list-item-big):hover, .p-datepicker-monthpicker .dp-year-container .dp-list-item:not(.dp-list-item-big):hover, .dp-year-only .dp-year-container .dp-list-item:not(.dp-list-item-big):hover {\n  background-color: rgba(165, 243, 252, 0.3137254902) !important;\n  color: #06B6D4;\n}\n.dp-monthyear-mode .dp-month-list, .dp-monthyear-mode .dp-year-container, .p-datepicker-monthpicker .dp-month-list, .p-datepicker-monthpicker .dp-year-container, .dp-year-only .dp-month-list, .dp-year-only .dp-year-container {\n  width: 49%;\n  flex: 1;\n  margin: 0px;\n  background-color: transparent;\n  padding: 0px;\n  height: 100%;\n}\n.dp-monthyear-mode .dp-month-list .dp-list-item, .dp-monthyear-mode .dp-year-container .dp-list-item, .p-datepicker-monthpicker .dp-month-list .dp-list-item, .p-datepicker-monthpicker .dp-year-container .dp-list-item, .dp-year-only .dp-month-list .dp-list-item, .dp-year-only .dp-year-container .dp-list-item {\n  cursor: pointer;\n}\n.dp-monthyear-mode .dp-month-list .dp-list-item:hover, .dp-monthyear-mode .dp-year-container .dp-list-item:hover, .p-datepicker-monthpicker .dp-month-list .dp-list-item:hover, .p-datepicker-monthpicker .dp-year-container .dp-list-item:hover, .dp-year-only .dp-month-list .dp-list-item:hover, .dp-year-only .dp-year-container .dp-list-item:hover {\n  color: #06B6D4;\n  border-bottom: 1px solid rgba(165, 243, 252, 0.3137254902);\n}\n.dp-monthyear-mode .dp-month-list:hover, .dp-monthyear-mode .dp-year-container:hover, .p-datepicker-monthpicker .dp-month-list:hover, .p-datepicker-monthpicker .dp-year-container:hover, .dp-year-only .dp-month-list:hover, .dp-year-only .dp-year-container:hover {\n  background-color: rgba(255, 255, 255, 0.3137254902);\n}\n\n.p-datepicker {\n  padding: 0px;\n  background-color: white;\n  box-shadow: 1px 2px 26px rgba(0, 0, 0, 0.2117647059);\n  width: 321px;\n}\n.p-datepicker .p-datepicker-group-container {\n  width: 100%;\n}\n.p-datepicker .p-datepicker-group {\n  background: linear-gradient(45deg, rgba(255, 255, 255, 0.7882352941), rgba(255, 255, 255, 0.5294117647));\n  border-radius: 8px;\n  padding-bottom: 1px;\n}\n.p-datepicker .p-datepicker-header {\n  padding: 0px;\n  /*position: fixed;\n  left: 0;*/\n  height: 50px;\n}\n.p-datepicker .p-datepicker-header .datepicker-custom-header {\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n.p-datepicker .p-datepicker-header .datepicker-custom-header .dp-header-top {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  border-bottom: 1px solid #eaeaea;\n}\n.p-datepicker .p-datepicker-header .datepicker-custom-header .dp-header-top .dp-header-month {\n  border-right: 1px solid #eaeaea;\n}\n.p-datepicker .p-datepicker-header .datepicker-custom-header .dp-header-top .dp-header-month .dp-arrow-left {\n  border-radius: 7px 0px 0px 0px;\n}\n.p-datepicker .p-datepicker-header .datepicker-custom-header .dp-header-top .dp-header-year .dp-arrow-right {\n  border-radius: 0px 7px 0px 0px;\n}\n.p-datepicker .p-datepicker-header .datepicker-custom-header .dp-header-top .dp-header-part {\n  width: 49%;\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.p-datepicker .p-datepicker-header .datepicker-custom-header .dp-header-top .dp-header-part .dp-arrow {\n  width: 30px;\n  height: 49px;\n  min-width: 30px;\n  min-height: 49px;\n  max-width: 30px;\n  max-height: 49px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.p-datepicker .p-datepicker-header .datepicker-custom-header .dp-header-top .dp-header-part .dp-arrow:hover {\n  background-color: rgba(165, 243, 252, 0.3137254902);\n  color: #06B6D4;\n}\n.p-datepicker .p-datepicker-header .datepicker-custom-header .dp-header-top .dp-header-part .dp-label-button {\n  width: calc(100% - 60px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 50px;\n  margin: 0px;\n  text-transform: capitalize;\n  color: #06B6D4;\n}\n.p-datepicker .p-datepicker-header .datepicker-custom-header .dp-header-top .dp-header-part .dp-label-button:hover {\n  background-color: rgba(165, 243, 252, 0.3137254902);\n  font-weight: 800;\n}\n.p-datepicker .p-datepicker-header .datepicker-custom-header .dp-header-top .dp-header-part:hover {\n  background-color: rgba(255, 255, 255, 0.3137254902);\n}\n.p-datepicker .p-datepicker-calendar-container {\n  padding: 10px;\n  /* margin-top: 50px;*/\n}\n.p-datepicker .p-datepicker-calendar-container .p-datepicker-calendar {\n  margin: 0px;\n}\n.p-datepicker .p-datepicker-calendar-container .p-datepicker-calendar thead tr th {\n  padding: 2px;\n}\n.p-datepicker .p-datepicker-calendar-container .p-datepicker-calendar thead tr th span {\n  color: #000000;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.p-datepicker .p-datepicker-calendar-container .p-datepicker-calendar tbody tr .p-datepicker-today {\n  background-color: transparent;\n}\n.p-datepicker .p-datepicker-calendar-container .p-datepicker-calendar tbody tr .p-datepicker-today span {\n  background-color: transparent;\n  font-weight: 600;\n  color: #06B6D4;\n  border: 1px solid #06B6D4;\n  text-decoration: underline;\n}\n.p-datepicker .p-datepicker-calendar-container .p-datepicker-calendar tbody tr td {\n  padding: 0px;\n  border: 1px solid #f4f4f4;\n}\n.p-datepicker .p-datepicker-calendar-container .p-datepicker-calendar tbody tr td .p-highlight {\n  color: #e7efff !important;\n  background-color: #06B6D4 !important;\n  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3137254902);\n  font-weight: 600;\n}\n.p-datepicker .p-datepicker-calendar-container .p-datepicker-calendar tbody tr td .p-disabled {\n  opacity: 0.3;\n  cursor: not-allowed;\n  background-color: rgba(217, 217, 217, 0) !important;\n  font-size: 12px;\n}\n.p-datepicker .p-datepicker-calendar-container .p-datepicker-calendar tbody tr td span {\n  margin: 0;\n  width: 100%;\n  border-radius: 0px;\n}\n.p-datepicker .p-datepicker-calendar-container .p-datepicker-calendar tbody tr td span:hover {\n  background-color: rgba(165, 243, 252, 0.3137254902) !important;\n  color: #06B6D4;\n  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3137254902);\n}\n\n/* WRAPPER GLOBAL */\n.dp-monthyear-header {\n  width: 360px;\n  background: #ffffff;\n  border-radius: 18px;\n  padding: 24px 26px;\n  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.1);\n  display: flex;\n  flex-direction: column;\n  font-family: Inter, sans-serif;\n  gap: 22px;\n}\n\n/* TITRE */\n.dp-header-top-alt .dp-title {\n  font-size: 1.55rem;\n  font-weight: 700;\n  text-align: center;\n  color: #1c1c1c;\n  margin-bottom: 2px;\n}\n\n/* MOIS  */\n.datepickerbook .dp-year-list .dp-list-item:hover {\n  background: #9394d8;\n}\n\n.dp-month-list .dp-list-item-active {\n  background: #ffffff;\n  font-weight: 600;\n}\n\n/* Centrage parfait */\n.dp-year-list {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 8px;\n  padding: 0;\n}\n\n/* Année normale */\n.dp-year-list .dp-list-item {\n  font-size: 1.2rem;\n  color: #8f8f8f;\n  padding: 4px 0;\n  cursor: pointer;\n  transition: 0.15s;\n}\n\n.dp-year-list .dp-list-item:hover {\n  color: #000;\n}\n\n/* FLECHES */\n.dp-arrow-up,\n.dp-arrow-down {\n  font-size: 1.5rem;\n  color: #333;\n  padding: 6px;\n  border: none;\n  background: none;\n  cursor: pointer;\n  margin: 4px 0;\n}\n\n/* ACTIONS BAS – GROS BOUTONS */\n.dp-actions {\n  display: flex;\n  justify-content: center;\n  gap: 20px;\n  padding-top: 5px;\n  padding-bottom: 10px;\n}\n\n/* TITRE MOIS ANNEE */\n.dp-header-top {\n  margin: auto;\n}\n\n/*DATEPICKER MENSUEL CUSTOMISE*/\n.p-monthpicker {\n  display: none !important;\n  margin: auto;\n}\n\n.datepickerbook .p-datepicker-header {\n  border: none !important;\n  border-bottom: none !important;\n  box-shadow: none !important;\n  background: transparent !important;\n}\n\n.datepickerbook.p-datepicker {\n  padding: 0 !important;\n  margin: 0 !important;\n}\n\n/*DATEPICKER ANNUEL CUSTOMISE*/\n.p-yearpicker {\n  display: none !important;\n}\n\n.datepickerbook .p-datepicker-footer {\n  margin-bottom: 20px;\n}";
 styleInject(css_248z$1);
 
-var _excluded$3 = ["value", "onChange", "placeholder", "dateFormat", "view", "invalid", "errorMessage", "disabled", "locale", "showTime", "showIcon", "icon", "iconBgButton", "iconPos", "name", "id", "fullWidth", "inputProps", "onBlur", "onSelect", "onClick", "showClear", "reopenOnClick"];
+var _excluded$3 = ["value", "onChange", "placeholder", "dateFormat", "displayMask", "view", "invalid", "errorMessage", "disabled", "locale", "showTime", "showIcon", "icon", "iconBgButton", "iconPos", "name", "id", "fullWidth", "inputProps", "onBlur", "onSelect", "onClick", "showClear", "reopenOnClick", "invalidDateMessage"];
 var normalizeDate = function normalizeDate(v) {
   if (!v) return null;
   return v instanceof Date ? v : new Date(v);
@@ -13188,13 +13188,14 @@ var DatePicker = function DatePicker(_ref) {
     placeholder = _ref$placeholder === void 0 ? 'Choisissez une date' : _ref$placeholder,
     _ref$dateFormat = _ref.dateFormat,
     dateFormat = _ref$dateFormat === void 0 ? "dd/mm/yy" : _ref$dateFormat,
+    _ref$displayMask = _ref.displayMask,
+    displayMask = _ref$displayMask === void 0 ? true : _ref$displayMask,
     _ref$view = _ref.view,
     view = _ref$view === void 0 ? 'date' : _ref$view,
     _ref$invalid = _ref.invalid,
-    invalid = _ref$invalid === void 0 ? false : _ref$invalid,
-    _ref$errorMessage = _ref.errorMessage,
-    errorMessage = _ref$errorMessage === void 0 ? '' : _ref$errorMessage,
-    _ref$disabled = _ref.disabled,
+    invalid = _ref$invalid === void 0 ? false : _ref$invalid;
+    _ref.errorMessage;
+    var _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     _ref$locale = _ref.locale,
     locale = _ref$locale === void 0 ? "fr" : _ref$locale,
@@ -13219,8 +13220,9 @@ var DatePicker = function DatePicker(_ref) {
     var _ref$showClear = _ref.showClear,
     showClear = _ref$showClear === void 0 ? true : _ref$showClear,
     _ref$reopenOnClick = _ref.reopenOnClick,
-    reopenOnClick = _ref$reopenOnClick === void 0 ? true : _ref$reopenOnClick,
-    rest = _objectWithoutProperties$1(_ref, _excluded$3);
+    reopenOnClick = _ref$reopenOnClick === void 0 ? true : _ref$reopenOnClick;
+    _ref.invalidDateMessage;
+    var rest = _objectWithoutProperties$1(_ref, _excluded$3);
   var _useState = useState(function () {
       return normalizeDate(value);
     }),
@@ -13253,14 +13255,18 @@ var DatePicker = function DatePicker(_ref) {
     _useState12 = _slicedToArray$9(_useState11, 2),
     panelReady = _useState12[0],
     setPanelReady = _useState12[1];
+  var _useState13 = useState(false),
+    _useState14 = _slicedToArray$9(_useState13, 2),
+    internalError = _useState14[0],
+    setInternalError = _useState14[1];
   var selectedYear = useRef(null);
   var skipYearReposition = useRef(false);
   var inputRef = useRef(null);
   var calendarRef = useRef(null);
-  var _useState13 = useState(false),
-    _useState14 = _slicedToArray$9(_useState13, 2);
-    _useState14[0];
-    _useState14[1];
+  var _useState15 = useState(false),
+    _useState16 = _slicedToArray$9(_useState15, 2);
+    _useState16[0];
+    _useState16[1];
   var wheelCooldown = useRef(false);
   var scrollListenersRef = useRef([]);
   var panelWheelListenerRef = useRef(null);
@@ -13290,6 +13296,19 @@ var DatePicker = function DatePicker(_ref) {
         return 'date';
     }
   };
+  var INVALID_DATE_MESSAGES = {
+    fr: 'La date saisie est invalide',
+    en: 'The entered date is invalid',
+    es: 'La fecha introducida no es válida',
+    de: 'Das eingegebene Datum ist ungültig'
+  };
+  var getMaskFromDateFormat = function getMaskFromDateFormat(dateFormat) {
+    return dateFormat.replace(/d{1,2}/g, function (m) {
+      return '9'.repeat(m.length === 1 ? 1 : 2);
+    }).replace(/m{1,2}/g, function (m) {
+      return '9'.repeat(m.length === 1 ? 1 : 2);
+    }).replace(/yy/g, '9999').replace(/y/g, '9').replace(/[a-zA-Z]/g, '9');
+  };
   useEffect(function () {
     var trigger = document.querySelector('.p-datepicker-trigger');
     if (trigger && iconBgButton) {
@@ -13324,14 +13343,23 @@ var DatePicker = function DatePicker(_ref) {
   };
   var inputStyle = {
     width: '200px',
-    border: invalid ? '1px solid red' : '1px solid #ccc',
+    border: invalid || internalError ? '1px solid red' : '1px solid #ccc',
     padding: '0.5rem',
     borderRadius: '6px'
   };
   var localLanguage = locale !== null && locale !== void 0 ? locale : 'fr';
   var handleChange = function handleChange(e) {
+    var _inputRef$current;
     var newDate = e.value;
     setValeur(newDate);
+
+    // Si l'input contient une valeur mais que PrimeReact n'a pas pu la parser → invalide
+    var inputVal = (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.value;
+    if (inputVal && inputVal.replace(/[_/]/g, '').trim() !== '' && !newDate) {
+      setInternalError(true);
+    } else {
+      setInternalError(false);
+    }
     if (newDate) {
       setViewDate(newDate);
     }
@@ -13360,12 +13388,21 @@ var DatePicker = function DatePicker(_ref) {
   };
   var handleKeyDown = function handleKeyDown(e) {
     if (e.key === 'Enter') {
+      var _inputRef$current2;
       e.preventDefault();
-      if (panelVisibleRef.current && calendarRef.current) {
-        calendarRef.current.hide();
-      }
-      if (inputRef.current) {
-        inputRef.current.blur();
+      var inputVal = (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.value;
+      var isIncomplete = inputVal && inputVal.includes('_');
+      var isEmpty = !inputVal || inputVal.replace(/[_/]/g, '').trim() === '';
+      if (!isEmpty && (isIncomplete || !valeur)) {
+        setInternalError(true);
+      } else {
+        setInternalError(false);
+        if (panelVisibleRef.current && calendarRef.current) {
+          calendarRef.current.hide();
+        }
+        if (inputRef.current) {
+          inputRef.current.blur();
+        }
       }
     }
   };
@@ -13373,6 +13410,7 @@ var DatePicker = function DatePicker(_ref) {
     e.preventDefault();
     e.stopPropagation();
     setValeur(null);
+    setInternalError(false);
     if (calendarRef.current) {
       calendarRef.current.hide();
     }
@@ -13405,6 +13443,8 @@ var DatePicker = function DatePicker(_ref) {
       return next;
     });
   };
+  var isInvalid = invalid || internalError;
+  var activeErrorMessage = INVALID_DATE_MESSAGES[locale];
   var headerTemplate = function headerTemplate() {
     var current = viewDate || new Date();
     var monthIndex = current.getMonth();
@@ -13624,6 +13664,7 @@ var DatePicker = function DatePicker(_ref) {
         onClick: function onClick() {
           var newDate = new Date(viewDate);
           setValeur(newDate);
+          setInternalError(false);
           if (onChange) {
             onChange({
               value: newDate
@@ -13696,20 +13737,10 @@ var DatePicker = function DatePicker(_ref) {
         capture: false
       });
     });
-    // La classe dp-ready est retirée à chaque fermeture (handleHide).
-    // La CSS cache .datepickerbook:not(.dp-ready) → panel invisible dès sa création,
-    // avant même le premier paint du navigateur.
-    // On ajoute dp-ready uniquement après avoir repositionné.
     setTimeout(function () {
       var _calendarRef$current2;
       var currentOverlay = (_calendarRef$current2 = calendarRef.current) === null || _calendarRef$current2 === void 0 ? void 0 : _calendarRef$current2.getOverlay();
       if (!currentOverlay) return;
-
-      // Attache un listener wheel sur tout le panel overlay.
-      // En mode mois/année ou année seule (.dp-monthyear-header présent),
-      // bloque toute propagation du wheel vers les conteneurs parents
-      // (popups, pages) et délègue le scroll d'années si la cible est
-      // dans .dp-year-container.
       var panelWheelHandler = function panelWheelHandler(e) {
         var isMonthYearMode = currentOverlay.querySelector('.dp-monthyear-header');
         if (!isMonthYearMode) return;
@@ -13734,10 +13765,6 @@ var DatePicker = function DatePicker(_ref) {
       };
       var customContent = currentOverlay.querySelector('.dp-monthyear-header');
       if (customContent) {
-        // Ajout de 80px pour simuler une fenêtre plus haute aux yeux de
-        // DomHandler.absolutePosition, ce qui abaisse le seuil de bascule
-        // vers le haut. Cela compense les boutons Annuler/Valider qui sont
-        // masqués en mode month mais occupent de l'espace hors viewport.
         currentOverlay.style.minHeight = customContent.offsetHeight + 80 + 'px';
       }
       var extraHeight = 80;
@@ -13778,9 +13805,6 @@ var DatePicker = function DatePicker(_ref) {
       cleanupScrollListeners();
     };
   }, []);
-
-  // Reposition quand on bascule en mode monthYear depuis le mode date (panel déjà ouvert).
-  // Même logique que dans handleShow : gonfle minHeight, repositionne, puis corrige le top.
   useEffect(function () {
     if (mode !== 'monthYear' || !panelVisibleRef.current) return;
     var extraHeight = 80;
@@ -13830,6 +13854,7 @@ var DatePicker = function DatePicker(_ref) {
     inputId: id,
     name: name,
     panelClassName: panelClassName,
+    className: internalError ? 'p-invalid' : '',
     onBlur: handleBlur,
     onKeyDown: handleKeyDown,
     viewDate: viewDate,
@@ -13839,6 +13864,8 @@ var DatePicker = function DatePicker(_ref) {
     headerTemplate: headerTemplate
   }, (dateFormat === 'mm/yy' || dateFormat === 'yy') && {
     footerTemplate: headerTemplate
+  }, displayMask && {
+    mask: getMaskFromDateFormat(dateFormat)
   }, rest, {
     onShow: handleShow,
     onHide: handleHide
@@ -13850,12 +13877,12 @@ var DatePicker = function DatePicker(_ref) {
     "aria-label": "Effacer la date"
   }, /*#__PURE__*/React__default.createElement("i", {
     className: "pi pi-times"
-  }))), invalid && /*#__PURE__*/React__default.createElement("small", {
+  }))), isInvalid && /*#__PURE__*/React__default.createElement("small", {
     style: {
       color: 'red',
       fontStyle: 'italic'
     }
-  }, errorMessage || 'Date invalide', " !"));
+  }, activeErrorMessage, " !"));
 };
 
 var DatePickerPresets = {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "arengibook",
   "private": false,
-  "version": "3.1.6-datepicker",
+  "version": "3.1.8-datepicker",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "exports": {