arengibook 3.1.5-datepicker → 3.1.7-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"];
 var normalizeDate = function normalizeDate(v) {
   if (!v) return null;
   return v instanceof Date ? v : new Date(v);
@@ -13188,6 +13188,8 @@ 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,
@@ -13257,16 +13259,13 @@ var DatePicker = function DatePicker(_ref) {
   var skipYearReposition = useRef(false);
   var inputRef = useRef(null);
   var calendarRef = useRef(null);
-  var _useState13 = useState(null),
+  var _useState13 = useState(false),
     _useState14 = _slicedToArray$9(_useState13, 2);
     _useState14[0];
     _useState14[1];
-  var _useState15 = useState(false),
-    _useState16 = _slicedToArray$9(_useState15, 2),
-    isScrolling = _useState16[0];
-    _useState16[1];
-  var wheelCooldown = false;
+  var wheelCooldown = useRef(false);
   var scrollListenersRef = useRef([]);
+  var panelWheelListenerRef = useRef(null);
   var panelVisibleRef = useRef(false);
   useEffect(function () {
     setStory(datePickerStorie(dateFormat));
@@ -13293,6 +13292,13 @@ var DatePicker = function DatePicker(_ref) {
         return 'date';
     }
   };
+  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) {
@@ -13400,17 +13406,20 @@ var DatePicker = function DatePicker(_ref) {
     }
   }, [valeur]);
   addLocale(localLanguage, LOCALES[localLanguage]);
+  var changeYear = function changeYear(delta) {
+    setViewDate(function (prev) {
+      var base = prev || new Date();
+      var next = new Date(base.getTime());
+      next.setFullYear(next.getFullYear() + delta);
+      return next;
+    });
+  };
   var headerTemplate = function headerTemplate() {
     var current = viewDate || new Date();
     var monthIndex = current.getMonth();
     var year = current.getFullYear();
     var localeConfig = LOCALES[localLanguage] || {};
     var monthNames = localeConfig.monthNames || ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'];
-    Array.from({
-      length: 21
-    }, function (_, i) {
-      return year - 10 + i;
-    });
     var changeMonth = function changeMonth(delta) {
       setViewDate(function (prev) {
         var base = prev || new Date();
@@ -13419,40 +13428,9 @@ var DatePicker = function DatePicker(_ref) {
         return next;
       });
     };
-    var changeYear = function changeYear(delta) {
-      setViewDate(function (prev) {
-        var base = prev || new Date();
-        var next = new Date(base.getTime());
-        next.setFullYear(next.getFullYear() + delta);
-        return next;
-      });
-    };
     var handleArrowMouseDown = function handleArrowMouseDown(delta) {
-      changeYear(delta); // On change l'année de ±1, pas de ±2
+      changeYear(delta);
     };
-    useEffect(function () {
-      var yearContainerSingle = document.querySelector('.dp-year-container');
-      var handleWheel = function handleWheel(e) {
-        e.preventDefault();
-        if (wheelCooldown) return;
-        var delta = Math.sign(e.deltaY);
-        changeYear(delta);
-        wheelCooldown = true;
-        setTimeout(function () {
-          wheelCooldown = false;
-        }, 120); // durée idéale après tests
-      };
-      if (yearContainerSingle) {
-        yearContainerSingle.addEventListener('wheel', handleWheel, {
-          passive: false
-        });
-      }
-      return function () {
-        if (yearContainerSingle) {
-          yearContainerSingle.removeEventListener('wheel', handleWheel);
-        }
-      };
-    }, [changeYear, isScrolling]);
     var setMonthFromList = function setMonthFromList(index) {
       setViewDate(function (prev) {
         var base = prev || new Date();
@@ -13735,6 +13713,34 @@ var DatePicker = function DatePicker(_ref) {
       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;
+        e.preventDefault();
+        e.stopPropagation();
+        var yearContainer = currentOverlay.querySelector('.dp-year-container');
+        if (yearContainer && yearContainer.contains(e.target)) {
+          if (wheelCooldown.current) return;
+          changeYear(Math.sign(e.deltaY));
+          wheelCooldown.current = true;
+          setTimeout(function () {
+            wheelCooldown.current = false;
+          }, 120);
+        }
+      };
+      currentOverlay.addEventListener('wheel', panelWheelHandler, {
+        passive: false
+      });
+      panelWheelListenerRef.current = {
+        overlay: currentOverlay,
+        handler: panelWheelHandler
+      };
       var customContent = currentOverlay.querySelector('.dp-monthyear-header');
       if (customContent) {
         // Ajout de 80px pour simuler une fenêtre plus haute aux yeux de
@@ -13763,6 +13769,13 @@ var DatePicker = function DatePicker(_ref) {
     var _calendarRef$current3;
     panelVisibleRef.current = false;
     cleanupScrollListeners();
+    if (panelWheelListenerRef.current) {
+      var _panelWheelListenerRe = panelWheelListenerRef.current,
+        _overlay = _panelWheelListenerRe.overlay,
+        handler = _panelWheelListenerRe.handler;
+      _overlay.removeEventListener('wheel', handler);
+      panelWheelListenerRef.current = null;
+    }
     var overlay = (_calendarRef$current3 = calendarRef.current) === null || _calendarRef$current3 === void 0 ? void 0 : _calendarRef$current3.getOverlay();
     if (overlay) {
       overlay.style.minHeight = '';
@@ -13835,6 +13848,8 @@ var DatePicker = function DatePicker(_ref) {
     headerTemplate: headerTemplate
   }, (dateFormat === 'mm/yy' || dateFormat === 'yy') && {
     footerTemplate: headerTemplate
+  }, displayMask && {
+    mask: getMaskFromDateFormat(dateFormat)
   }, rest, {
     onShow: handleShow,
     onHide: handleHide

package/package.json

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