使用 jQuery Datepicker 使日期在加载时无法选择

Question

I have two dates: a Min and a Max, like seen on the linked picture. How do I set so that when the page loads, that the minimum date is set for the "Max date" field when rendering the page? So that the days become unselectable. I've tried "onload" like:

onLoad: function (selectedDate) {
    if (this.id == 'datetimepickerFrom') {
        var dateMin = $('#datetimepickerFrom').datepicker("getDate");
        var rMin = new Date(dateMin.getFullYear(), dateMin.getMonth(), dateMin.getDate());
        $('#datetimepickerTo').datepicker("option", "minDate", rMin);
    }
}

The days still remain selectable when the page loads. The days only become unselectable on the "Max date" field when a user clicks in the "Min date" input field.

Using: jQuery UI default widget

Answer 1

If you already have date Strings for Min and Max in your DB or somewhere, you can simple set the dates using $.datepicker.parseDate(dateFormat, dateString) . See More here: jQuery UI API | DatePicker

 var selectedDates = { min: "10/04/2019", max: "10/18/2019" }; $(function() { var dateFormat = "mm/dd/yy", from = $("#from").datepicker({ changeMonth: true, minDate: $.datepicker.parseDate(dateFormat, selectedDates.min), maxDate: $.datepicker.parseDate(dateFormat, selectedDates.max) }).on("change", function() { to.datepicker("option", "minDate", getDate(this)); }), to = $("#to").datepicker({ changeMonth: true, minDate: $.datepicker.parseDate(dateFormat, selectedDates.min), maxDate: $.datepicker.parseDate(dateFormat, selectedDates.max) }).on("change", function() { from.datepicker("option", "maxDate", getDate(this)); }); function getDate(element) { var date; try { date = $.datepicker.parseDate(dateFormat, element.value); } catch (error) { date = null; } return date; } from.datepicker("setDate", selectedDates.min); to.datepicker("setDate", selectedDates.max); });

 <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> <label for="from">From</label> <input type="text" id="from" name="from"> <label for="to">to</label> <input type="text" id="to" name="to">

Answer 2

It may could help you:

 $(function () { var date = new Date(); date.setDate(date.getDate()); var startDate, endDate = date; $('.from_date').datepicker({ format: 'dd MM yyyy', endDate: date, startDate: '18 May 2019', autoclose: true }).on('changeDate', function (selected) { startDate = new Date(selected.date.valueOf()); console.log(startDate); $('.to_date').datepicker('setStartDate', startDate); if (startDate > endDate) { $('.to_date').datepicker('setDate', startDate); } }); $('.to_date').datepicker({ format: 'dd MM yyyy', endDate: date, startDate: '8 Oct 2016', autoclose: true }).on('changeDate', function (selected) { endDate = new Date(selected.date.valueOf()); console.log(endDate); }); })

 <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker.css" rel="stylesheet"/> <script src="https://code.jquery.com/jquery-1.9.1.js"></script> <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script> <input type="text" style="margin-top: 20px;important:" class="from_date" placeholder="Select start date" contenteditable="false"> <input type="text" style="margin-top; 20px !important;" class="to_date" placeholder="Select start date" contenteditable="false">