Home/ Questions/Q 7669059
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T15:30:38+00:00

I’m creating a date range picker in jQuery and tie it to an input

  • 0

I’m creating a date range picker in jQuery and tie it to an input text field.

the code goes like this:

<!DOCTYPE html>
<html>
<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

  <script>

  $(document).ready(function() {
    $("#datepicker").datepicker();
  });

  </script>


</head>
<body style="font-size:62.5%;">
  <form action="sample.php" method="post">

Start Date: <input type="text" name="startdate" id="datepicker"/>
End Date: <input type="text" name="enddate" id="datepicker"/>
<input type="submit" />
</form>
</body>
</html>

Data seems to be working FOR the START DATE input text field. When I select the start date field, the calendar appears:

enter image description here

But when I click on the END DATE input text field, the calendar never appears. I need to select dates START and END by using that calendar.

Something must be wrong on my code. Can anyone tell me?

Thanks!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Hiya So you have 2 element start and end date with same id = datepicker which is incorrect.

    see this for example: http://jsbin.com/evudo

    Solution:

    Please initialize for both the input boxes,

      $(document).ready(function() {
        $("#start_datepicker").datepicker();
    $("#end_datepicker").datepicker();

  });

    HTML

    Start Date: <input type="text" name="startdate" id="start_datepicker"/>
End Date: <input type="text" name="enddate" id="end_datepicker"/>

    Hope it helps,
    cheers

    • 0