jquery datepicker date range selection?

Question

JavaScript

Probably someone in his project faced such a task. We need a calendar with the ability to select a date range from and to, i.e. a person clicks once on the first date - this is the start date of the event, clicks in the same calendar a second time - this is the end of the event, and all dates between the start and end are highlighted.

Didn't find any solution for jQuery UI Datepicker although maybe I didn't search well. Perhaps there is no ready-made solution, but it is written in an elementary way and someone has already implemented this, maybe share information or an algorithm?

Thanks in advance!

Answer 1

jQuery UI Datepicker expects the input to store a date value, so two input fields are used to select the range.

Answer 2

Jquery Datepicker:
Two input type="text" fields with id="from" and id="to"
Processing code By clicking inside the field, the calendar is called, if one of the fields is already selected, the date selection "before" or "after" is prohibited in the calendar » selected, whichever was selected first. Source
$(function() {
var dates = $( "#from, #to" ).datepicker({
onSelect: function( selectedDate ) {
var option = this.id == "from" ? "minDate" : "maxDate",
instance = $( this ).data( "datepicker" ),
date = $.datepicker.parseDate(
instance.settings.dateFormat ||
$.datepicker._defaults.dateFormat,
selectedDate, instance.settings );
dates.not( this ).datepicker( "option", option, date );
}
});
});

Answer 3

xdsoft.net/jqplugins/datetimepicker/#range maybe this?