Question

29

jQuery Date Picker tied up to an input text field error

rated 0 times [ 32] [ 3] / answers: 1 / hits: 33306 / 12 Years ago, mon, march 19, 2012, 12:00:00

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

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!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

tyasiaalmap

Add To Favorites

Follow

Total Points: 294

Total Questions: 107

Total Answers: 108

Location: Libya

Member since Mon, Dec 7, 2020

4 Years ago

answered 12 Years ago bryantc · Accepted Answer

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