JSFiddle - React, Tailwind, and code Playground

by Tejash Soni

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.4/build/jquery.datetimepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<input type="text" name="when" class="input-date" id="calendarfrom"/>
<input type="text" name="when" class="input-date" id="calendarto"/>

JavaScript

$(document).ready(function () {
    $("#calendarfrom").datepicker({
        dateFormat: "dd/mm/yy",
        minDate: 0,
        monthNames: ["Januar", "Februar", "Mars", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Desember"],
        dayNamesMin: ['Søn', 'Man', 'Tir', 'Ons', 'Tor', 'Fre', 'Lør'],
        firstDay: 1,
        onClose: function (date) {
        	var dateParts = date.split("/");
			var dateObject = new Date(dateParts[2], dateParts[1] - 1, dateParts[0]);
        	var selectedDate = new Date(dateObject);
            var numberOfDaysToAdd = 14;
            var endDate = new Date(selectedDate);
            endDate.setDate(endDate.getDate() + numberOfDaysToAdd); 
		    $("#calendarto").datepicker("option", "minDate", selectedDate);
            $("#calendarto").datepicker("option", "maxDate", endDate);             }
    });
    $("#calendarto").datepicker({
        dateFormat: "dd/mm/yy",
        monthNames: ["Januar", "Februar", "Mars", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Desember"],
        dayNamesMin: ['Søn', 'Man', 'Tir', 'Ons', 'Tor', 'Fre', 'Lør'],
        firstDay: 1,
        onClose: function (selectedDate) {
            $("#calendarfrom").datepicker("option", "maxDate", selectedDate);
        }
    });
});