Download builder: jqueryui.com or jqueryui.templersmc.net
Datepicker install files:
- Styles
- Scripts
Images (folder images should be in css folder)
- Custom Arrows
Date Range Picker documentation
Date Range Picker install files:
Input type date
PHP
<form action="" method="POST">
<!-- Single date-->
<div class="form_item">
<span class="pre_input">Date of birth</span>
<label>
<input type="text" name="birthday" class="input || birthday" value="">
</label>
</div>
<!-- Multiple Dates-->
<div class="row_f">
<div class="col_6 || col_xs_12">
<h3>Multiple Dates</h3>
<div class="form_item">
<span class="pre_input">Pickup date</span>
<label class="label_input_icon">
<input type="text" name="date_from" class="input || input_calendar || start_date" value="">
<?= svg('iconCalendar','')?>
</label>
</div>
</div>
<div class="col_6 || col_xs_12">
<div class="form_item">
<span class="pre_input">Drop off date</span>
<label class="label_input_icon">
<input type="text" name="date_to" class="input || input_calendar || end_date" value="">
<?= svg('iconCalendar','')?>
</label>
</div>
</div>
</div>
<!-- Date Range Picker Plugin -->
<div class="form_item">
<span class="pre_input">Date Range</span>
<label>
<input type="text" name="date_range" class="input || date_range" value="">
</label>
</div>
<!-- Show calendar box-->
<div class="form_item">
<span class="pre_input">Schedule an Appointment</span>
<div class="appointment"></div>
</div>
</form>CSS
/* datepicker styles */
.ui-datepicker{width:25.1rem;height:auto;-webkit-border-radius:.5rem;-moz-border-radius:.5rem;border-radius:.5rem;-webkit-box-shadow:0 .1rem 1rem rgba(0,0,0,.25);-moz-box-shadow:0 .1rem 1rem rgba(0,0,0,.25);box-shadow:0 .1rem 1rem rgba(0,0,0,.25);border:none!important;z-index:10!important;padding:0}
.ui-datepicker table{margin:0}
.ui-datepicker a{text-decoration:none}
.ui-datepicker-header{border:none!important;background-color:#1b1b1b!important;color:#e0e0e0!important}
.ui-datepicker .ui-datepicker-prev span,.ui-datepicker .ui-datepicker-next span{background-image:unset!important}
.ui-datepicker .ui-datepicker-title select{font-size:1.4rem;color:#1b1b1b}
.ui-datepicker-title{text-align:center}
.ui-datepicker-prev,.ui-datepicker-prev.ui-state-hover,.ui-datepicker-prev.ui-state-focus,.ui-datepicker-next,.ui-datepicker-next.ui-state-hover,.ui-datepicker-next.ui-state-focus{display:inline-block;width:3rem!important;height:3rem!important;text-align:center;cursor:pointer;background-image:url(/img/datepicker_arrows.png)!important;background-repeat:no-repeat!important;line-height:600%;overflow:hidden}
.ui-datepicker-prev{float:left;background-position:center -3rem!important}
.ui-datepicker-next{float:right;background-position:center 0!important}
.ui-datepicker .ui-datepicker-prev-hover{left:.2rem!important}
.ui-datepicker .ui-datepicker-next-hover{right:.2rem!important}
.ui-datepicker .ui-datepicker-prev-hover,.ui-datepicker .ui-datepicker-next-hover{top:.2rem!important}
.ui-datepicker thead{background-color:#f7f7f7;background-image:-webkit-gradient(linear,left top,left bottom,from(#f7f7f7),to(#f1f1f1));background-image:-webkit-linear-gradient(top,#f7f7f7 0%,#f1f1f1 100%);background-image:-moz-linear-gradient(top,#f7f7f7 0%,#f1f1f1 100%);background-image:-o-linear-gradient(top,#f7f7f7 0%,#f1f1f1 100%);background-image:linear-gradient(top,#f7f7f7 0%,#f1f1f1 100%);border-bottom:.1rem solid #d0d0d0}
.ui-datepicker th{text-transform:uppercase;font-size:.8rem;padding:.5rem 0;color:#666;text-shadow:.1rem 0 0 #fff}
.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}
.ui-datepicker tbody td{padding:0;border-right:.1rem solid #d0d0d0}
.ui-datepicker tbody td:last-child{border-right:0}
.ui-datepicker tbody tr{border-bottom:.1rem solid #d0d0d0}
.ui-datepicker tbody tr:last-child{border-bottom:0}
.ui-datepicker td span,.ui-datepicker td a{display:inline-block;text-align:center;font-size:1.4rem;font-weight:700!important;width:3.5rem;height:3.5rem;line-height:3.1rem;color:#666!important;text-shadow:.1rem .1rem 0 #fff}
.ui-datepicker-calendar .ui-state-default{background-color:#ededed;-webkit-box-shadow:inset .1rem .1rem 0 0 rgba(250,250,250,.5);-moz-box-shadow:inset .1rem .1rem 0 0 rgba(250,250,250,.5);box-shadow:inset .1rem .1rem 0 0 rgba(250,250,250,.5)}
.ui-datepicker-calendar .ui-state-hover,.ui-datepicker-calendar .ui-state-hover.ui-state-active{background-color:#09a5be}
.ui-datepicker-calendar .ui-state-hover.ui-state-active,.ui-widget-content .ui-state-highlight.ui-state-active.ui-state-hover{color:#fff!important}
.ui-datepicker-calendar .ui-state-active{background-color:#09a5be;-webkit-box-shadow:inset 0 0 1rem 0 rgba(0,0,0,.1);-moz-box-shadow:inset 0 0 1rem 0 rgba(0,0,0,.1);box-shadow:inset 0 0 1rem 0 rgba(0,0,0,.1);color:#e0e0e0!important;text-shadow:0 .1rem 0 #09a5be}
.ui-datepicker-unselectable .ui-state-default{background-color:#f4f4f4;color:#b4b3b3}
.ui-datepicker-calendar td:first-child .ui-state-active{width:3.5rem;margin-left:0}
.ui-datepicker-calendar td:last-child .ui-state-active{width:3.5rem;margin-right:0}
.ui-datepicker-calendar tr:last-child .ui-state-active{height:3.5rem;margin-bottom:0}
.ui-state-highlight,.ui-widget-content .ui-state-highlight,.ui-widget-header .ui-state-highlight{color:#09a5be!important}
.ui-widget-content .ui-state-highlight.ui-state-active{color:#e0e0e0!important}
.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-color:transparent}JavaScript
/* single date */
$('.birthday').datepicker({
maxDate: new Date(),
dateFormat:'dd-mm-yy',
changeMonth: true,
changeYear: true,
yearRange: "-100:+0",
showOtherMonths: true,
selectOtherMonths: true
});
/* disabled dates */
var array = ["15-06-2020","16-06-2020","17-06-2020"];
function disableDates(date){
var string = jQuery.datepicker.formatDate('dd-mm-yy', date);
return [ array.indexOf(string) == -1 ]
}
var $minDate = new Date();
/* from-to dates */
$('.start_date').datepicker({
changeYear: true,
changeMonth:true,
dateFormat: 'dd-mm-yy',
showOtherMonths: true,
selectOtherMonths: true,
minDate: new Date(),
onSelect: function(date) {
var minDate = $(this).datepicker('getDate');
minDate.setDate(minDate.getDate());
// minDate.setDate(minDate.getDate()+3);
$('.end_date').datepicker("setDate", minDate);
$('.end_date').datepicker("option", "minDate", minDate);
$(".end_date").datepicker('enable');
},
beforeShowDay: disableDates
});
$('.end_date').datepicker({
dateFormat: 'dd-mm-yy',
showOtherMonths: true,
selectOtherMonths: true,
minDate: new Date(),
beforeShowDay: disableDates
});
/* custom styles */
$('.appointment').datepicker({
minDate: new Date(),
yearRange: "-0:+0",
dateFormat: 'dd-mm-yy',
changeMonth: true,
changeYear: true,
showOtherMonths: true,
selectOtherMonths: true,
});
/* date range picker plugin */
$('.date_range').daterangepicker();
$.datepicker.regional['uk'] = {
closeText: "Закрити",
prevText: "<",
nextText: ">",
currentText: "Сьогодні",
monthNames: [ "Січень", "Лютий", "Березень", "Квітень", "Травень", "Червень", "Липень", "Серпень", "Вересень", "Жовтень", "Листопад", "Грудень" ],
monthNamesShort: [ "Січ", "Лют", "Бер", "Кві", "Тра", "Чер", "Лип", "Сер", "Вер", "Жов", "Лис", "Гру" ],
dayNames: [ "неділя", "понеділок", "вівторок", "середа", "четвер", "п’ятниця", "субота" ],
dayNamesShort: [ "нед", "пнд", "вів", "срд", "чтв", "птн", "сбт" ],
dayNamesMin: [ "Нд", "Пн", "Вт", "Ср", "Чт", "Пт", "Сб" ],
weekHeader: "Тиж",
dateFormat: "dd.mm.yy",
firstDay: 1,
isRTL: false,
showMonthAfterYear: false,
yearSuffix: ""
};
$.datepicker.setDefaults($.datepicker.regional['uk']);