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
– CPK_2011

2022-09-10 10:13:38 +00:00
Commented Sep 10, 2022 at 10:13 — CPK_2011
– CPK_2011, Commented Sep 10, 2022 at 10:13
jquery-ui version?

josemigallas
– josemigallas

2024-02-21 16:00:43 +00:00
Commented Feb 21, 2024 at 16:00 — josemigallas
– josemigallas, Commented Feb 21, 2024 at 16:00

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

1

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>

answered Sep 10, 2022 at 21:58

shravan kumar

284 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

CPK_2011 Over a year ago

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.

shravan kumar Over a year ago

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.

Collectives™ on Stack Overflow

jQuery UI datepicker onSelect NOT working

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related