https://legacy.forums.gravityhelp.com/topic/jquery-date-range-functionality-lost-upon-selecting-a-date Gravity Support Forums Topic: Jquery Date range - functionality lost upon selecting a date en-US Mon, 20 Apr 2026 02:54:44 +0000 http://bbpress.org/?v=1.0.1 q https://legacy.forums.gravityhelp.com/search.php https://legacy.forums.gravityhelp.com/topic/jquery-date-range-functionality-lost-upon-selecting-a-date#post-69584 Sun, 05 Aug 2012 20:33:32 +0000 Chris Hajer 69584@https://legacy.forums.gravityhelp.com/ <p>Please post a URL to your site if you need additional assistance. Thank you. </p> https://legacy.forums.gravityhelp.com/topic/jquery-date-range-functionality-lost-upon-selecting-a-date#post-69551 Sun, 05 Aug 2012 10:03:56 +0000 Ketiga 69551@https://legacy.forums.gravityhelp.com/ <p>Combining the two helped out a little;</p> <pre><code>var $j = jQuery.noConflict(); $j(document).ready(function(){ $j(&quot;#input_3_21&quot;).datepicker({ defaultDate: &#39;+1d&#39;, minDate: &#39;+1d&#39;, changeMonth: true, numberOfMonths: 3, onSelect: function( selectedDate ) { var instance = $j(this).data(&quot;datepicker&quot;); var date = $j.datepicker.parseDate(instance.settings.dateFormat || $j.datepicker._defaults.dateFormat, selectedDate, instance.settings); $j( &quot;#input_3_22&quot; ).datepicker( &quot;option&quot;,&quot;minDate&quot;, date ); } }); $j(&quot;#input_3_22&quot;).datepicker({ defaultDate: &#39;+1d&#39;, minDate: &#39;+1d&#39;, changeMonth: true, numberOfMonths: 3, onSelect: function( selectedDate ) { var instance = $j(this).data(&quot;datepicker&quot;); var date = $j.datepicker.parseDate(instance.settings.dateFormat || $j.datepicker._defaults.dateFormat, selectedDate, instance.settings); $j( &quot;#input_3_21&quot; ).datepicker(&quot;option&quot;,&quot;maxDate&quot;, date ); } }); });</code></pre> https://legacy.forums.gravityhelp.com/topic/jquery-date-range-functionality-lost-upon-selecting-a-date#post-69550 Sun, 05 Aug 2012 09:34:06 +0000 Ketiga 69550@https://legacy.forums.gravityhelp.com/ <p>Using the code below, which I found here:</p> <p><a href="http://stackoverflow.com/questions/5922184/create-a-specific-date-range-with-jquery-datepicker" rel="nofollow">http://stackoverflow.com/questions/5922184/create-a-specific-date-range-with-jquery-datepicker</a></p> <p>it does seem to work. Still I'd like to know why the other code didn't, since I understand it better.</p> <pre><code>var $j = jQuery.noConflict(); $j(document).ready(function(){ var fromDate = $j(&quot;#input_3_21&quot;).datepicker({ defaultDate: &quot;+0d&quot;, changeMonth: true, numberOfMonths: 2, minDate: new Date(), onSelect: function(selectedDate) { var instance = $j(this).data(&quot;datepicker&quot;); var date = $j.datepicker.parseDate(instance.settings.dateFormat || $j.datepicker._defaults.dateFormat, selectedDate, instance.settings); toDate.datepicker(&quot;option&quot;, &quot;minDate&quot;, date); } }); var toDate = $j(&quot;#input_3_22&quot;).datepicker({ defaultDate: &quot;+0d&quot;, changeMonth: true, numberOfMonths: 2 }); });</code></pre> https://legacy.forums.gravityhelp.com/topic/jquery-date-range-functionality-lost-upon-selecting-a-date#post-69545 Sun, 05 Aug 2012 05:30:05 +0000 Ketiga 69545@https://legacy.forums.gravityhelp.com/ <p>Hmm, weird.</p> <p>When I select a date in field two, the month and year in date field one jump to december 2006</p> <p>:S </p> https://legacy.forums.gravityhelp.com/topic/jquery-date-range-functionality-lost-upon-selecting-a-date#post-69544 Sun, 05 Aug 2012 04:54:17 +0000 Ketiga 69544@https://legacy.forums.gravityhelp.com/ <p>Hello,</p> <p>I've seen many posts on the date range and date picker functionality but unfortunately they have not fixed my issue.</p> <p>-I have created two date fields in my form</p> <p>-I use the following code in a file called date-range.js</p> <pre><code>var $j = jQuery.noConflict(); $j(document).ready(function(){ $j(&quot;#input_3_21&quot;).datepicker({ defaultDate: &#39;+1d&#39;, minDate: &#39;+1d&#39;, changeMonth: true, numberOfMonths: 3, onSelect: function( selectedDate ) { $j( &quot;#input_3_22&quot; ).datepicker( &quot;option&quot;,&quot;minDate&quot;, selectedDate ); } }); $j(&quot;#input_3_22&quot;).datepicker({ defaultDate: &#39;+1d&#39;, minDate: &#39;+1d&#39;, changeMonth: true, numberOfMonths: 3, onSelect: function( selectedDate ) { $j( &quot;#input_3_21&quot; ).datepicker(&quot;option&quot;,&quot;maxDate&quot;, selectedDate ); } }); });</code></pre> <p>In my theme functions file I use:</p> <pre><code>add_action(&#39;gform_enqueue_scripts_3&#39;, &#39;enqueue_date_range_script&#39;, 10, 2); function enqueue_date_range_script($form, $is_ajax) { wp_enqueue_script(&#39;date_range_script&#39;, get_stylesheet_directory_uri() . &#39;/js/date-range.js&#39;, array(&#39;jquery&#39;)); }</code></pre> <p>Before selecting any date everything is fine. The default, mindate and three visible months all work as expected when I click the field.</p> <p>The problem occurs on selecting a date in my SECOND date field (the 'to' date). When I do this and go back to my first date field ( the 'from' date) to change the date, all values are greyed out.</p> <p>In the second date field the mindate and other conditions are lost when selecting a date in field one.</p> <p>I am also able to select a date before the date of date field one, which should not be possible. </p> <p>The code for the date range was copied from here:</p> <p><a href="http://jqueryui.com/demos/datepicker/#date-range" rel="nofollow">http://jqueryui.com/demos/datepicker/#date-range</a></p> <p>I made some minor adjustments. </p>