jQuery UI datepicker onSelect NOT working

Question

I have From Date and To Date jQuery datepicker controls and if I change From Date, then To Date should automatically be 180 days from From Date

Below code is not firing the onSelect event even if this looks so simple...

$("#txtFrom").datepicker({
        minDate: 0,
        onSelect: function (dateStr) {
            var newDate = $(this).datepicker('getDate');
            if (newDate) {
                newDate.setDate(newDate.getDate() + 180);
            }
            $('#txtTo').datepicker('setDate', newDate).datepicker('option', 'minDate', newDate);
        }
    });

Also, I require onChange event to be fired...

Any help would be greatly appreciated.

What's wrong with this code?
– CPK_2011
Commented Sep 10, 2022 at 10:13 — CPK_2011, Commented Sep 10, 2022 at 10:13
jquery-ui version?
– josemigallas
Commented Feb 21, 2024 at 16:00 — josemigallas, Commented Feb 21, 2024 at 16:00

shravan kumar · Accepted Answer · 2022-09-10 21:58:14Z

I have replicated your scenario. Hope this helps.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Datepicker - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#datepicker" ).datepicker({
        onSelect:function(dateStr){
            var oldDate = $(this).datepicker('getDate');
            var newDate = new Date(oldDate.setMonth(oldDate.getMonth()+7))
            newDate=(newDate.getMonth()+1)+'/'+(newDate.getMonth()+1)+'/'+newDate.getFullYear()
            document.getElementById("datepicker1").value = newDate;
        }
    });
  } );
  </script>
</head>
<body>
 
<p>From_Date: <input type="text" id="datepicker"></p>
<p>To_Date: <input type="text" id="datepicker1"></p>
 
</body>
</html>

Is it possible to have a DatePicker icon next to the Text control. Also, currently, I cannot change the Year directly. I have to scroll through each month. — CPK_2011, Commented Sep 10, 2022 at 22:07
yes, you have to scroll to each month. That's how basic date picker works. But you can search for other date picker libraries in which you can scroll through the year. Hope this helps. Upvote if it's helpful. — shravan kumar, Commented Sep 10, 2022 at 22:20

Collectives™ on Stack Overflow

jQuery UI datepicker onSelect NOT working

1 Answer 1

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Related