jQuery calendar, ajax button click and onready - PHP jQuery BS-Calendar Ajax

Question

I'm tyring to implement this calendar for my project. http://eonasdan.github.io/bootstrap-datetimepicker/

The problem is that I need to use the same calendar with the id (i.e #datetimepicker8 and #datetimepicker9) for five times.

In other words, I'm trying to run a for loop five times, that will display the calendar five times (with from and to date).

To make this shorten, I have five rows(running in for loop) with From and To date and the user will select the From Date and To Date.

Here is my full code: http://pastebin.com/80p18JXQ

<script type="text/javascript">
$(function () {
$('#datetimepicker8').datetimepicker();
$('#datetimepicker9').datetimepicker();
$("#datetimepicker8").on("dp.change",function (e) {
$('#datetimepicker9').data("DateTimePicker").setMinDate(e.date);
});
$("#datetimepicker9").on("dp.change",function (e) {
$('#datetimepicker8').data("DateTimePicker").setMaxDate(e.date);
});
});
</script>

<table>
<tr><td>
<div class="col-sm-3">
<div class="input-group date" id="datetimepicker8" style="width: 150px;" tabindex="2">
<input class="form-control" name="from_date" type="text">
<span class="input-group-addon"><i class="glyphicon-calendar glyphicon"></i></span></div>
</div></td>
<td>
<div class="col-sm-3">
<div class="input-group date" id="datetimepicker9" style="width: 150px;" tabindex="2">
<input class="form-control" name="to_date" type="text">
<span class="input-group-addon"><i class="glyphicon-calendar glyphicon"></i> </span> </div>
</div></td></tr>

<tr><td>
<div class="col-sm-3">
<div class="input-group date" id="datetimepicker8" style="width: 150px;" tabindex="2">
<input class="form-control" name="from_date" type="text">
<span class="input-group-addon"><i class="glyphicon-calendar glyphicon"></i></span></div>
</div></td>
<td>
<div class="col-sm-3">
<div class="input-group date" id="datetimepicker9" style="width: 150px;" tabindex="2">
<input class="form-control" name="to_date" type="text">
<span class="input-group-addon"><i class="glyphicon-calendar glyphicon"></i> </span> </div>
</div></td></tr>
</table>

I have added the code in jsfiddle also, and here is the link http://jsfiddle.net/965XJ/1/

Any help on this will be appreciable.

Thanks, Kimz

Eonasdan · Accepted Answer · 2014-05-30 14:19:37Z

1

rule number 1 of HTML, you can't have the same ID for more then one element. That's why they call it ID.

You could use classes to initialize the datepickers and use jquery to find the next closest picker. See this fiddle. Notice the additional classes I've added.

$('.date').datetimepicker();

$(".from_date").on("dp.change", function (e) {
    $(this).nextAll(".to_date").data("DateTimePicker").setMinDate(e.date);
});

$(".to_date").on("dp.change", function (e) {
    $(this).prevAll(".from_date").data("DateTimePicker").setMaxDate(e.date);
});

Html:

<div class="input-group date from_date" style="width: 150px;" tabindex="2">
    <input class="form-control" name="from_date" type="text" /> <span class="input-group-addon"><i class="glyphicon-calendar glyphicon"></i></span>

</div>
<div class="input-group date to_date" style="width: 150px;" tabindex="2">
    <input class="form-control" name="to_date" type="text" /> <span class="input-group-addon"><i class="glyphicon-calendar glyphicon"></i> </span>

</div><br/>
<!-- padding for jsfiddle -->
<div class="input-group date from_date" style="width: 150px;" tabindex="2">
    <input class="form-control" name="from_date" type="text" /> <span class="input-group-addon"><i class="glyphicon-calendar glyphicon"></i></span>

</div>
<div class="input-group date to_date" style="width: 150px;" tabindex="2">
    <input class="form-control" name="to_date" type="text" /> <span class="input-group-addon"><i class="glyphicon-calendar glyphicon"></i> </span>

</div><br/>
<!-- padding for jsfiddle -->
<div class="input-group date from_date" style="width: 150px;" tabindex="2">
    <input class="form-control" name="from_date" type="text" /> <span class="input-group-addon"><i class="glyphicon-calendar glyphicon"></i></span>

</div>
<div class="input-group date to_date" style="width: 150px;" tabindex="2">
    <input class="form-control" name="to_date" type="text" /> <span class="input-group-addon"><i class="glyphicon-calendar glyphicon"></i> </span>

</div>

answered May 30, 2014 at 14:19

Eonasdan

7,8119 gold badges60 silver badges85 bronze badges

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

2 Comments

user3350885 Over a year ago

hey man, thanks .. this worked. also i'm new to jquery. thanks for your kind reply/answer and suggesting me with the rules. you are awesome man. +100 for you !!! ;)

user3350885 Over a year ago

I have raised one more ticket/issue in your forum. Help me out if you can please. github.com/Eonasdan/bootstrap-datetimepicker/issues/354

Collectives™ on Stack Overflow

jQuery calendar, ajax button click and onready - PHP jQuery BS-Calendar Ajax

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