How to set arrival and departure date in jquery datepicker

Last Modified at 2019-06-25 21:29:27

<div dir="ltr" style="text-align: left;">In travel related projects or in date wise report generation, we need to set arrival and departure date or from and to date for getting exact results as we want. So in this tutorial, I am going to explain you how to create from and to date using popular Jquery date-picker script in a very simple way.<br /><br />First of all, create a index.php file  and add two text boxes and set name and id with from_date and to_date respectively.<br /><br /><div style="background: #ffffff; overflow: auto; padding: 0.2em 0.6em; width: auto;"><pre style="line-height: 125%; margin: 0;"><span style="color: #333333;"><</span><span style="color: #007020;">input</span> <span style="color: #007020;">type</span><span style="color: #333333;">=</span><span style="background-color: #fff0f0;">"text"</span> <span style="color: #007020;">id</span><span style="color: #333333;">=</span><span style="background-color: #fff0f0;">"from_date"</span> name<span style="color: #333333;">=</span><span style="background-color: #fff0f0;">"from_date"</span> value<span style="color: #333333;">=</span><span style="background-color: #fff0f0;">""</span> <span style="color: #333333;">/></span><br /><span style="color: #333333;"><</span><span style="color: #007020;">input</span> <span style="color: #007020;">type</span><span style="color: #333333;">=</span><span style="background-color: #fff0f0;">"text"</span> name<span style="color: #333333;">=</span><span style="background-color: #fff0f0;">"to_date"</span> <span style="color: #007020;">id</span><span style="color: #333333;">=</span><span style="background-color: #fff0f0;">"to_date"</span> value<span style="color: #333333;">=</span><span style="background-color: #fff0f0;">""</span> <span style="color: #333333;">/></span><br /></pre></div><div><br /></div><div>And add below Jquery code in footer area as below.</div><br /><div style="background: #ffffff; overflow: auto; padding: 0.2em 0.6em; width: auto;"><pre style="line-height: 125%; margin: 0;"><span style="color: #333333;"><</span>script <span style="color: #007020;">type</span><span style="color: #333333;">=</span><span style="background-color: #fff0f0;">"text/javascript"</span><span style="color: #333333;">></span><br /><span style="background-color: #ffaaaa; color: red;">$</span>(function() {<br /> <span style="background-color: #ffaaaa; color: red;">$</span>( <span style="background-color: #fff0f0;">"#from_date"</span> )<span style="color: #333333;">.</span>datepicker({dateFormat: <span style="background-color: #fff0f0;">'d-M-yy'</span>,numberOfMonths: <span style="color: #0000dd; font-weight: bold;">2</span>,minDate: <span style="color: #0000dd; font-weight: bold;">0</span>,onSelect: function (selected) {<br /> var dt <span style="color: #333333;">=</span> new Date(selected);<br /> dt<span style="color: #333333;">.</span>setDate(dt<span style="color: #333333;">.</span>getDate() <span style="color: #333333;">+</span> <span style="color: #0000dd; font-weight: bold;">1</span>);<br /> setTimeout(function() {<br /> <span style="background-color: #ffaaaa; color: red;">$</span>(<span style="background-color: #fff0f0;">'#to_date'</span>)<span style="color: #333333;">.</span>datepicker(<span style="background-color: #fff0f0;">'show'</span>);<br /> }, <span style="color: #0000dd; font-weight: bold;">300</span>)<br /> <span style="background-color: #ffaaaa; color: red;">$</span>(<span style="background-color: #fff0f0;">"#to_date"</span>)<span style="color: #333333;">.</span>datepicker(<span style="background-color: #fff0f0;">"option"</span>, <span style="background-color: #fff0f0;">"minDate"</span>, dt);<br /> }});<br /> <span style="background-color: #ffaaaa; color: red;">$</span>( <span style="background-color: #fff0f0;">"#to_date"</span> )<span style="color: #333333;">.</span>datepicker({dateFormat: <span style="background-color: #fff0f0;">'d-M-yy'</span>,numberOfMonths: <span style="color: #0000dd; font-weight: bold;">2</span>,onSelect: function (selected) {<br /> var dt <span style="color: #333333;">=</span> new Date(selected);<br /> dt<span style="color: #333333;">.</span>setDate(dt<span style="color: #333333;">.</span>getDate() <span style="color: #333333;">-</span> <span style="color: #0000dd; font-weight: bold;">1</span>);<br /> <span style="background-color: #ffaaaa; color: red;">$</span>(<span style="background-color: #fff0f0;">"#from_date"</span>)<span style="color: #333333;">.</span>datepicker(<span style="background-color: #fff0f0;">"option"</span>, <span style="background-color: #fff0f0;">"maxDate"</span>, dt);<br /> }});<br /><br /> });<br /><span style="color: #333333;"></</span>script<span style="color: #333333;">></span><br /></pre></div><div><br /><b><a href="http://demos.9do.info/date_range/" target="_blank" rel="noopener noreferrer">DEMO</a>    <a href="http://demos.9do.info/date_range/date_range.zip">DONLOAD</a></b><br /><br />That's it. Thank you for taking interest in my blog.<br /><br /><br /></div></div>

Latest Articles

© 2013-2020 Lipku.com. All Rights Reserved.