jQuery Date Picker tied up to an input text field error
Question
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:
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!
5 answers
solution1
3 ACCPTED 2012-03-19 07:46:55
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
solution2
2 2012-03-19 07:49:21
you have given the same id for both elements.. ID value for an element should be unique in that document.
<script>
$(document).ready(function() {
$("#datepicker1").datepicker(); });
$("#datepicker2").datepicker(); });
</script> </head>
<body style="font-size:62.5%;">
<form action="sample.php" method="post">
Start Date: <input type="text" name="startdate" id="datepicker1"/>
End Date: <input type="text" name="enddate" id="datepicker2"/>
<input type="submit" /> </form>
</body> </html>
Or you can use a class,
<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" class="datepicker"/>
End Date: <input type="text" name="enddate" class="datepicker"/>
<input type="submit" /> </form>
</body> </html>
solution3
2 2012-03-19 07:52:33
IDs should be unique according to the standards ,try changing the ID for start date and end date. Or replace the id with class.
Start Date: <input type="text" name="startdate" class="datepicker"/>
End Date: <input type="text" name="enddate" class="datepicker"/>
$(document).ready(function() {
$(".datepicker").datepicker();
});
Hope this helps!
solution4
1 2012-03-19 07:46:59
You are using the same id for both the input fields. Try this
Start Date: <input type="text" name="startdate" id="datepicker_start"/>
End Date: <input type="text" name="enddate" id="datepicker_end"/>
$(document).ready(function() {
$("#datepicker_start").datepicker();
$("#datepicker_end").datepicker();
});
solution5
0 2012-03-19 07:47:32
Definition and Usage The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document). from W3schools
if you want to have a date range using two text fields try this
var dates = j$( "#trdatefrom, #trdateto" ).datepicker({
changeMonth: true,
changeYear: true,
maxDate: new Date(),
dateFormat: "yy/mm/dd",
onSelect: function( selectedDate ) {
var option = this.id == "trdatefrom" ? "minDate" : "maxDate",
instance = j$( this ).data( "datepicker" ),
date =j$.datepicker.parseDate(
instance.settings.dateFormat ||
j$.datepicker._defaults.dateFormat,
selectedDate, instance.settings );
dates.not( this ).datepicker( "option", option, date );
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.