JSFiddle - React, Tailwind, and code Playground

by kuyabiye

HTML

<input type="text" class="js-datepicker" />

JavaScript

var SITE = SITE || {}
SITE = {
    datepicker: {
			selector: '.js-datepicker',
			init: function(el, opts) {
				var base = this, defaultOpts = {
					changeMonth: true,
					changeYear: true,
					dateFormat: "dd.mm.yy",
					defaultDate: new Date(1990, 0, 1),
					showOtherMonths: true,
					selectOtherMonths: true,
					showOn: 'button',
					buttonText: '',
					onClose: function() {
						$(this).attr('readonly', false);
					},
					beforeShow: function(input, inst) {
						var $input = $(this);
						if ($input.closest('.form-list').length) {
							$input.datepicker('widget').addClass('in-form');
						}

						base.drawArrow(input);

						$input.attr('readonly', true);
					},
					onChangeMonthYear: function(year, month, inst) {
						$(this).datepicker('setDate', new Date(year, month - 1, inst.selectedDay));
					}

				};

				if (this.overriden !== true) {
					this.override();
				}

				if (el) {
					// if datepicker is initialized
					if (el.hasClass('hasDatepicker')) {
						if (opts) {
							el.datepicker('option', opts);
						}
					} else {

						el.datepicker(opts ? $.extend(defaultOpts, opts) : defaultOpts);
					}
				} else {

					$(this.selector).datepicker(defaultOpts);
				}
				// this.closeOnOutClick();

			},
			drawArrow: function(input) {
				var $input = $(input), widget = $input.datepicker('widget'), direction;

				setTimeout(function() {

					var inputOffset = $input.offset(), widgetOffset = widget.offset();

					direction = inputOffset.top > widgetOffset.top ? 'down' : 'up';

					widget.addClass('direction-' + direction);

					var arrow = widget.find('.datepicker-arrow');

					if (!arrow.length) {
						arrow = $('<div class="datepicker-arrow"/>').appendTo(widget);
					}

					arrow.css({
						left: inputOffset.left - widgetOffset.left
					});

				}, 10);
			},
			override: function() {
				var datepickerExtensions = {
					_oldUpdateDatepicker: $.datepicker._updateDatepicker,
					_updateDatepicker:...