datepicker

inventory-datepicker   

Copy
Edit
<!-- components/datepicker/inventory-datepicker.html --> <div class="generic-datepicker"> <input type="text" id="datepickerTTT" class="plato"> </div>
Copy
Copy
Edit
/* scss/datepicker/_inventory-datepicker.scss */ .generic-datepicker{ } .ui-widget.ui-widget-content:not(.ui-tooltip){ z-index: 55 !important; padding-top: 34px; padding-#{$start}: 23px; padding-#{$end}: 23px; font-family: 'mainfont'; width: 328px; } .ui-datepicker td{ border: 0; padding: 0px; width: 40px; height: 40px; border-radius: 50%; display: table-cell; } .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active{ border: none; background-color: unset; color: #344054; font-size: 14px; text-align: center; } .ui-button, .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, html .ui-button.ui-state-disabled:active, html .ui-button.ui-state-disabled:hover{ width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; } .ui-state-highlight{ background: #F2F4F7 !important; color: #344054 !important; } .ui-datepicker td:hover{ background: #F1F5FE; a{ color: #1852F1; } } .ui-state-active{ background: #1D5CF3 !important; color: #fff !important; } .ui-datepicker .ui-datepicker-header{ margin-bottom: 4px; } .ui-widget-header{ background: #fff; border: none; } .ui-datepicker .ui-datepicker-prev , .ui-datepicker-rtl .ui-datepicker-prev:hover{ #{$start}: 0; width: auto; @if $start == 'right'{ right: 14px !important; left: auto; } .ui-icon{ text-indent: unset; width: auto; color: transparent; @if $start == 'right'{ transform: rotateY(180deg); } &:before{ content: '\e981'; font-family: icomoonapp!important; speak: never; font-style: normal; font-weight: 400; font-variant: normal; text-transform: none; line-height: 0; -webkit-font-smoothing: antialiased; vertical-align: middle; font-size: 20px; color: #667085; position: relative; top: -1px; @if $start == 'right'{ right: 0; position: absolute; top: 50%; transform: translateY(-50%); } } } } .ui-datepicker .ui-datepicker-next , .ui-datepicker-rtl .ui-datepicker-next:hover { #{$end}: 0; width: auto; .ui-icon{ text-indent: unset; width: auto; color: transparent; @if $start == 'right'{ transform: rotateY(180deg); } &:before{ content: '\e982'; font-family: icomoonapp!important; speak: never; font-style: normal; font-weight: 400; font-variant: normal; text-transform: none; line-height: 0; -webkit-font-smoothing: antialiased; vertical-align: middle; font-size: 20px; color: #667085; position: relative; top: -1px; @if $start == 'right'{ left: 0; position: absolute; top: 50%; transform: translateY(-50%); } } } } .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus, .ui-button:hover, .ui-button:focus{ border: none; background: unset; color: #667085; } .ui-datepicker .ui-datepicker-prev-hover{ top: 2px; #{$start}: 0; cursor: pointer; } .ui-datepicker .ui-datepicker-next-hover{ top: 2px; #{$end}: 0; cursor: pointer; } .ui-datepicker .ui-datepicker-title{ font-size: 16px; margin: 0; } .ui-datepicker .ui-datepicker-buttonpane{ border: none; margin: 0; &::before{ content: ''; width: 119%; height: 1px; background: #E4E7EC; position: relative; top: 0; display: block; transform: translateX(-8%); @if $start == 'right'{ left: 52px; } } } .ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current , .ui-datepicker .ui-datepicker-buttonpane .ui-datepicker-close{ padding: 10px 46px; border-radius: 8px; border: 1px solid #D0D5DD; color: #344054; opacity: 1; font-weight: 500; font-size: 14px; margin-top: 16px; margin-bottom: 16px; margin-#{$end}: 0px; font-family: 'mainfont'; } .ui-datepicker .ui-datepicker-buttonpane .ui-datepicker-close{ background: #1D5CF3; color: #fff; font-weight: 500; } .ui-datepicker table{ margin-bottom: 15px; }
Copy
Edit
/* js/inventory-datepicker.js */ var bodyDirection = $('body').attr('dir'); var Rtl = false; var showMonthAfterYear = true; var closeText, currentText, monthNames, monthNamesShort, dayNames, dayNamesShort, dayNamesMin, weekHeader, showMonthAfterYear; closeText = "Done", currentText = 'Today', monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; dayNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']; dayNamesMin = ["su", "mo", "tu", "we" ,"the", "fr", "sa"]; if(bodyDirection == 'rtl'){ Rtl = true; showMonthAfterYear = false; closeText = "إغلاق", currentText = 'اليوم', monthNames = ["يناير", "فبراير", "مارس", "أبريل", "مايو", "يونيو", "يوليو", "أغسطس", "سبتمبر", "أكتوبر", "نوفمبر", "ديسمبر"]; dayNames = ["الأحد", "الاثنين", "الثلاثاء", "الأربعاء", "الخميس", "الجمعة", "السبت"]; dayNamesMin = ["ح", "ن", "ث", "ر", "خ", "ج", "س"]; } $( function() { $( "#datepickerTTT" ).datepicker({ dateFormat: 'yy/mm/dd', showButtonPanel: true, isRTL: Rtl, beforeShowDay: function (date) { // Sets Weekend Friday and Saturday. var weekend = date.getDay() == 5 || date.getDay() == 6; return [!weekend, 'myweekend']; }, // Sets Weekend position. closeText: closeText, currentText: currentText, monthNames: monthNames, dayNames: dayNames, dayNamesMin: dayNamesMin, isRTL: Rtl, showMonthAfterYear: showMonthAfterYear, yearSuffix: "" }); });