Note that there are some explanatory texts on larger screens.

plurals
  1. POjquery datepicker get date range
    primarykey
    data
    text
    <p>I am using jQuery datepicker to select date ranges. The code below gets the start <code>input1</code> and the end <code>input2</code> dates of the date range. But how do I simply get the dates in between? Thank you for your suggestions!</p> <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt; &lt;html&gt; &lt;head&gt; &lt;link type="text/css" href="../demoengine/demoengine.css" rel="stylesheet"&gt; &lt;script type="text/javascript" src="../demoengine/demoengine.js" async defer&gt;&lt;/script&gt; &lt;title&gt;jQuery UI Datepicker: Using Datepicker to Select Date Range&lt;/title&gt; &lt;link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/themes/ui-darkness/jquery-ui.css" rel="stylesheet"&gt; &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/jquery-ui.min.js"&gt;&lt;/script&gt; &lt;style type="text/css"&gt; .dp-highlight .ui-state-default { background: #484; color: #FFF; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="datepicker"&gt;&lt;/div&gt; &lt;p&gt; Dates: &lt;input type="text" id="input1" size="10"&gt; &lt;input type="text" id="input2" size="10"&gt; &lt;/p&gt; &lt;script type="text/javascript"&gt; $(function() { $("#datepicker").datepicker({ beforeShowDay: function(date) { var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input1").val()); var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input2").val()); return [true, date1 &amp;&amp; ((date.getTime() == date1.getTime()) || (date2 &amp;&amp; date &gt;= date1 &amp;&amp; date &lt;= date2)) ? "dp-highlight" : ""]; }, onSelect: function(dateText, inst) { var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input1").val()); var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input2").val()); if (!date1 || date2) { $("#input1").val(dateText); $("#input2").val(""); $(this).datepicker("option", "minDate", dateText); } else { $("#input2").val(dateText); $(this).datepicker("option", "minDate", null); } } }); }); &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload