All geek questions in one place

JQuery Datepicker selects multiple date ranges in one calendar

My requirement is to allow the user to select multiple date ranges in the same calendar, and previous dates cannot be selected. How is this possible? Below is the code and fiddle link

HTML

<p>from</p> <input type="text" class="spromotion-input-inbody spromotion-input-datepick" id="sproid-bookingcondition-datefrom"> <p>to</p> <input type="text" class="spromotion-input-inbody spromotion-input-datepick" id="sproid-bookingcondition-dateto">

SCRIPT

 $( function() { var dateFormat = "mm/dd/yy", from = $( "#sproid-bookingcondition-datefrom" ) .datepicker({ defaultDate: "+1w", changeMonth: true, numberOfMonths: 1 }) .on( "change", function() { to.datepicker( "option", "minDate", getDate( this ) ); }), to = $( "#sproid-bookingcondition-dateto" ).datepicker({ defaultDate: "+1w", changeMonth: true, numberOfMonths: 1 }) .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; } } );
+5
source share
6 answers

Please check that this can solve your problem.

 $(function() { $('input[name="daterange"]').daterangepicker(); $('input[name="daterange"]').change(function(){ $(this).val(); console.log($(this).val()); }); }); 
 <html> <head> <!-- Include Required Prerequisites --> <script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script> <script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script> <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css" /> <!-- Include Date Range Picker --> <script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script> <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" /> </head> <body> <input class="pull-right" type="text" name="daterange" value="01/15/2020 - 02/15/2010"> </body> </html>
+1
source

Unfortunately, this is not what the datepicker plugin is capable of doing out of the box. To do this, you will need special JavaScript.

I found a way that comes close to what you want using the onSelect and beforeShowDay . It supports its own array of selected dates, so, unfortunately, it does not integrate with a text field displaying the current date, etc. I just use it as an inline control, and then I can query the array for the currently selected dates.

The only thing you need to change about this code is to group every two dates into ranges, but there are several ways to do this depending on your desired UX. Personally, I would simply group every two dates as a range in the order in which the user selects. Then, if they remove the date from any range, the entire range is deleted (this is not encoded here, you need to add this).

Here is my code:

 <script> // Maintain array of dates var dates = new Array(); function addDate(date) { if (jQuery.inArray(date, dates) < 0) dates.push(date); } function removeDate(index) { dates.splice(index, 1); } // Adds a date if we don't have it yet, else remove it function addOrRemoveDate(date) { var index = jQuery.inArray(date, dates); if (index >= 0) removeDate(index); else addDate(date); } // Takes a 1-digit number and inserts a zero before it function padNumber(number) { var ret = new String(number); if (ret.length == 1) ret = "0" + ret; return ret; } jQuery(function () { jQuery("#datepicker").datepicker({ onSelect: function (dateText, inst) { addOrRemoveDate(dateText); }, beforeShowDay: function (date) { var year = date.getFullYear(); // months and days are inserted into the array in the form, eg "01/01/2009", but here the format is "1/1/2009" var month = padNumber(date.getMonth() + 1); var day = padNumber(date.getDate()); // This depends on the datepicker date format var dateString = month + "/" + day + "/" + year; var gotDate = jQuery.inArray(dateString, dates); if (gotDate >= 0) { // Enable date so it can be deselected. Set style to be highlighted return [true, "ui-state-highlight"]; } // Dates not in the array are left enabled, but with no extra style return [true, ""]; } }); }); </script>

And here is the fiddle: http://jsfiddle.net/gydL0epa/

0
source

As others have said, my MultiDatesPicker is close to your needs. It already allows you to select one range so that you can develop this plugin and edit / improve it to allow the selection of several ranges.

A quick and dirty solution is to comment out the line where the array of selected dates will receive a reset .

0
source

I think this multi-user dumping will help you solve your problem.

 $('#mdp-demo').multiDatesPicker(); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://cdn.rawgit.com/dubrox/Multiple-Dates-Picker-for-jQuery-UI/master/jquery-ui.multidatespicker.css" rel="stylesheet"/> <link href="https://code.jquery.com/ui/1.12.1/themes/pepper-grinder/jquery-ui.css" rel="stylesheet"/> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <script src="https://cdn.rawgit.com/dubrox/Multiple-Dates-Picker-for-jQuery-UI/master/jquery-ui.multidatespicker.js"></script> <div id="mdp-demo"></div>
0
source

Here is a service that allows you to use multiple dates and select a date range in one calendar http://t1m0n.name/air-datepicker/docs/

0
source

try it

 <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8" /> <script src="Scripts/jquery-1.11.1.js"></script> <script src="Scripts/jquery-ui-1.11.1.js"></script> <script src="Scripts/jquery-ui.multidatespicker.js"></script> <link href="css/jquery-ui.css" rel="stylesheet" /> <link href="css/jquery-ui.structure.css" rel="stylesheet" /> <link href="css/jquery-ui.theme.css" rel="stylesheet" /> <link href="css/pepper-ginder-custom.css" rel="stylesheet" /> <link href="css/prettify.css" rel="stylesheet" /> </head> <body> <input type="text" id="fromDate" /> <script> $(function () { $('#fromDate').multiDatesPicker(); }); </script> </body> </html>

you can download the js file at https://sourceforge.net/projects/multidatespickr/

-1
source

Source: https://habr.com/ru/post/1266838/

More articles:


All Articles