jQueryUI datepicker

by bairog

HTML

<head>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div>
<input type="date">
<input type="date" readonly>
<input type="date" disabled>
</div>
<div>
<input type="time">
<input type="time" readonly>
<input type="time" disabled>
</div>
<div>
<input type="submit" value=" Применить " onclick="alert('clicked!');" />
<input type="submit" value=" Применить " readonly onclick="alert('clicked!');" />
<input type="submit" value=" Применить " disabled onclick="alert('clicked!');" />
</div>
<input type="text" id="datepicker">
</body>

CSS

.event a {
    background-color: #42B373 !important;
    background-image :none !important;
    color: #ffffff !important;
}

.ui-datepicker-trigger {
    margin-left : 5px;
    vertical-align : bottom;
}

JavaScript

/* Russian (UTF-8) initialisation for the jQuery UI date picker plugin. */
/* Written by Andrew Stromnov ([email protected]). */
( function( factory ) {
	if ( typeof define === "function" && define.amd ) {

		// AMD. Register as an anonymous module.
		define( [ "../widgets/datepicker" ], factory );
	} else {

		// Browser globals
		factory( jQuery.datepicker );
	}
}( function( datepicker ) {

datepicker.regional.ru = {
	closeText: "Закрыть",
	prevText: "&#x3C;Пред",
	nextText: "След&#x3E;",
	currentText: "Сегодня",
	monthNames: [ "Январь","Февраль","Март","Апрель","Май","Июнь",
	"Июль","Август","Сентябрь","Октябрь","Ноябрь","Декабрь" ],
	monthNamesShort: [ "Янв","Фев","Мар","Апр","Май","Июн",
	"Июл","Авг","Сен","Окт","Ноя","Дек" ],
	dayNames: [ "воскресенье","понедельник","вторник","среда","четверг","пятница","суббота" ],
	dayNamesShort: [ "вск","пнд","втр","срд","чтв","птн","сбт" ],
	dayNamesMin: [ "Вс","Пн","Вт","Ср","Чт","Пт","Сб" ],
	weekHeader: "Нед",
	dateFormat: "dd.mm.yy",
	firstDay: 1,
	isRTL: false,
	showMonthAfterYear: false,
	yearSuffix: "" };
datepicker.setDefaults( datepicker.regional.ru );

return datepicker.regional.ru;

} ) );

// An array of dates
var eventDates = [];
eventDates.push({t: new Date( '02/24/2021' ), h: "1"});
eventDates.push({t: new Date( '03/02/2021' ), h: "2"});

$(document).ready(function () {  		
   	$('#datepicker').datepicker({
		   changeMonth: true,
			 changeYear: true,
			 
			 showOn: "both",
       buttonImage: "https://www.iconsdb.com/icons/download/gray/calendar-3-24.gif",
       buttonImageOnly: true,
       buttonText: "Select date",
			 
       beforeShowDay: function (date) {
			      var index = eventDates.findIndex(x => x.t.getTime() === date.getTime());            
                if(index != -1) {
                     return [true, "event", eventDates[index].h];
                } else {
                     return [true, '', ''];
                }
        }
    });
});