arengibook 3.0.3-datepicker.0 → 3.0.4-datepicker
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +35 -4
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -12998,13 +12998,13 @@ function styleInject(css, ref) {
|
|
|
12998
12998
|
}
|
|
12999
12999
|
}
|
|
13000
13000
|
|
|
13001
|
-
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 > .p-calendar {\n width: 100%;\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/* 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 justify-content: space-between;\n align-items: stretch;\n padding: 0.5rem 0.75rem;\n gap: 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 .datepicker-custom-header {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n padding: 0.5rem 0.75rem;\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/*.datepickerbook.dp-monthyear-mode .p-datepicker-calendar {\n display: none;\n}*/\n.p-datepicker-header.datepicker-custom-header.dp-monthyear-header {\n margin: auto;\n}\n\n/*.p-monthpicker*/\n.p-datepicker-monthpicker.dp-monthyear-mode {\n box-shadow: none !important;\n border-radius: 0px;\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}\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: 5px;\n border-top: 1px solid #eaeaea;\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: 100%;\n height: 300px;\n display: flex;\n align-items: flex-start;\n gap: initial;\n padding: 0px;\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 margin: 0px;\n border-right: 1px solid #eaeaea;\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 box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3137254902);\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 box-shadow: 1px 2px 4px rgba(0, 0, 0, 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}\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 box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3137254902);\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 box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3137254902);\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}\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 color: #06B6D4;\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 width: 300px;\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);\n color: #06B6D4;\n box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3137254902);\n}";
|
|
13001
|
+
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/* 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 justify-content: space-between;\n align-items: stretch;\n padding: 0.5rem 0.75rem;\n gap: 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 .datepicker-custom-header {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n padding: 0.5rem 0.75rem;\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/*.datepickerbook.dp-monthyear-mode .p-datepicker-calendar {\n display: none;\n}*/\n.p-datepicker-header.datepicker-custom-header.dp-monthyear-header {\n margin: auto;\n}\n\n/*.p-monthpicker*/\n.p-datepicker-monthpicker.dp-monthyear-mode {\n box-shadow: none !important;\n border-radius: 0px;\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}\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: 5px;\n border-top: 1px solid #eaeaea;\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: 100%;\n height: 300px;\n display: flex;\n align-items: flex-start;\n gap: initial;\n padding: 0px;\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 margin: 0px;\n border-right: 1px solid #eaeaea;\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 box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3137254902);\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 box-shadow: 1px 2px 4px rgba(0, 0, 0, 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}\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 box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3137254902);\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 box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3137254902);\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}\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 color: #06B6D4;\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 width: 300px;\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);\n color: #06B6D4;\n box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3137254902);\n}";
|
|
13002
13002
|
styleInject(css_248z$1);
|
|
13003
13003
|
|
|
13004
13004
|
var css_248z = "@charset \"UTF-8\";\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/* LAYOUT MOIS - ANNEES */\n/*.dp-header-lists {\n display: grid;\n grid-template-columns: 1fr 150px;\n align-items: center;\n gap: 30px;\n padding-top: 10px;\n padding-bottom: 10px;\n}*/\n/* MOIS */\n/*.dp-month-list {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}*/\n/*.dp-month-list .dp-list-item {\n font-size: 1.02rem;\n color: #222;\n border-radius: 6px;\n cursor: pointer;\n\n}*/\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/* SLOT MACHINE – ANNÉES */\n/*.dp-year-container {\n background: #f4f4f4;\n border-radius: 22px;\n padding: 16px 0;\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\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/* Année sélectionnée */\n.dp-list-item-active.dp-list-item-big {\n /*background: #6366f1;\n color: #fff !important;\n padding: 10px 22px;\n border-radius: 12px;\n font-size: 1.65rem !important;\n font-weight: 700 !important;*/\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/*.dp-actions .p-button {\n font-size: 1.2rem !important;\n padding: 12px 24px !important;\n border-radius: 10px !important;\n}*/\n/* TITRE MOIS ANNEE */\n.dp-header-top {\n margin: auto;\n}\n\n/* DATEPICKER CONTAINER */\n/*.p-datepicker .dp-monthyear-header {\n background: transparent !important;\n border: none !important;\n box-shadow: none !important;\n padding: 0 !important;\n border-radius: 30px;\n}*/\n/*.p-datepicker.datepickerbook.dp-monthyear-mode {\n border-radius: 30px;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\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}";
|
|
13005
13005
|
styleInject(css_248z);
|
|
13006
13006
|
|
|
13007
|
-
var _excluded$3 = ["value", "onChange", "placeholder", "dateFormat", "view", "invalid", "errorMessage", "disabled", "locale", "showTime", "showIcon", "icon", "iconBgButton", "iconPos", "name", "id", "fullWidth", "inputProps", "onBlur", "onSelect", "onClick"];
|
|
13007
|
+
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"];
|
|
13008
13008
|
var normalizeDate = function normalizeDate(v) {
|
|
13009
13009
|
if (!v) return null;
|
|
13010
13010
|
return v instanceof Date ? v : new Date(v);
|
|
@@ -13050,7 +13050,9 @@ var DatePicker = function DatePicker(_ref) {
|
|
|
13050
13050
|
onBlur = _ref.onBlur,
|
|
13051
13051
|
onSelect = _ref.onSelect;
|
|
13052
13052
|
_ref.onClick;
|
|
13053
|
-
var
|
|
13053
|
+
var _ref$showClear = _ref.showClear,
|
|
13054
|
+
showClear = _ref$showClear === void 0 ? true : _ref$showClear,
|
|
13055
|
+
rest = _objectWithoutProperties$1(_ref, _excluded$3);
|
|
13054
13056
|
var _useState = useState(function () {
|
|
13055
13057
|
return normalizeDate(value);
|
|
13056
13058
|
}),
|
|
@@ -13179,6 +13181,25 @@ var DatePicker = function DatePicker(_ref) {
|
|
|
13179
13181
|
onBlur(e);
|
|
13180
13182
|
}
|
|
13181
13183
|
};
|
|
13184
|
+
var handleClear = function handleClear(e) {
|
|
13185
|
+
e.preventDefault();
|
|
13186
|
+
e.stopPropagation();
|
|
13187
|
+
setValeur(null);
|
|
13188
|
+
if (calendarRef.current) {
|
|
13189
|
+
calendarRef.current.hide();
|
|
13190
|
+
}
|
|
13191
|
+
if (onChange) {
|
|
13192
|
+
onChange({
|
|
13193
|
+
value: null
|
|
13194
|
+
});
|
|
13195
|
+
}
|
|
13196
|
+
if (onSelect) {
|
|
13197
|
+
onSelect(null, {
|
|
13198
|
+
type: 'clear',
|
|
13199
|
+
source: 'DatePicker'
|
|
13200
|
+
});
|
|
13201
|
+
}
|
|
13202
|
+
};
|
|
13182
13203
|
useEffect(function () {
|
|
13183
13204
|
if (inputRef.current) {
|
|
13184
13205
|
var event = new Event('datePickerChange', {
|
|
@@ -13556,6 +13577,8 @@ var DatePicker = function DatePicker(_ref) {
|
|
|
13556
13577
|
var panelClassName = "datepickerbook" + (mode === "monthYear" ? " dp-monthyear-mode" : "") + (story === "year" ? " dp-year-only" : "");
|
|
13557
13578
|
return /*#__PURE__*/React__default.createElement("div", {
|
|
13558
13579
|
className: fullWidth ? "datepicker-fullwidth flex flex-col gap-1" : "flex flex-col gap-1"
|
|
13580
|
+
}, /*#__PURE__*/React__default.createElement("div", {
|
|
13581
|
+
className: "dp-input-wrapper"
|
|
13559
13582
|
}, /*#__PURE__*/React__default.createElement(CustomCalendar, _extends$A({
|
|
13560
13583
|
ref: calendarRef,
|
|
13561
13584
|
inputRef: inputRef,
|
|
@@ -13586,7 +13609,15 @@ var DatePicker = function DatePicker(_ref) {
|
|
|
13586
13609
|
}, rest, {
|
|
13587
13610
|
onShow: handleShow,
|
|
13588
13611
|
onHide: handleHide
|
|
13589
|
-
})),
|
|
13612
|
+
})), showClear && valeur && !disabled && /*#__PURE__*/React__default.createElement("button", {
|
|
13613
|
+
type: "button",
|
|
13614
|
+
className: "dp-clear-btn",
|
|
13615
|
+
onClick: handleClear,
|
|
13616
|
+
tabIndex: -1,
|
|
13617
|
+
"aria-label": "Effacer la date"
|
|
13618
|
+
}, /*#__PURE__*/React__default.createElement("i", {
|
|
13619
|
+
className: "pi pi-times"
|
|
13620
|
+
}))), invalid && /*#__PURE__*/React__default.createElement("small", {
|
|
13590
13621
|
style: {
|
|
13591
13622
|
color: 'red',
|
|
13592
13623
|
fontStyle: 'italic'
|