jquery ui 日期选择器无法处理附加的 div
jquery ui datepicker not working on appended div
嗨,我想在附加 div 上显示日期选择器,但它只影响第一次加载 div。
每当我尝试在附加的 div 上附加 div 时,日期选择器不起作用。
这是我的代码。
$("body").on("focus", ".datepickers", function() {
var $context = $(this).parents('.entry_day_plan');
$($(this), $context).datepicker({
showOtherMonths: true,
selectOtherMonths: true,
dateFormat: "dd/mm/yy",
minDate: 0,
onSelect: function(selectedDate) {
//$("#cal4").datepicker("setDate", selectedDate);
}
});
});
$(function() {
$("body").on('click', '.btn-add', function(e) {
e.preventDefault();
var controlForm = $('.controls_day_plan:first'),
currentEntry = $(this).parents('.entry_day_plan:first'),
newEntry = $(currentEntry.clone()).appendTo(controlForm);
newEntry.find('input').val('hello');
controlForm.find('.entry_day_plan:not(:last) .btn-add').removeClass('btn-add').addClass('btn-remove').removeClass('btn-success').addClass('btn-danger').html('<span class="glyphicon glyphicon-minus"></span>');
newEntry.find(".datepickers").removeClass('hasDatepicker');
}).on('click', '.btn-remove', function(e) {
$(this).parents('.entry_day_plan:first').remove();
e.preventDefault();
return false;
});
});
这是一个 html 代码...
<div class="panel-body dayplan">
<!--Day Plan-->
<div class="control-group" id="fields">
<label class="control-label" for="field1">Please add Day Plan </label>
<div class="controls_day_plan">
<div class="entry_day_plan input-group col-sm-12 col-xs-12 ">
<div class="form-group col-sm-2 col-xs-12">
<label for="exampleInputnumber"> Excursion Name </label>
<input type="text" name="itnryname[]" class=" form-control form_line_only" placeholder="EXCURSIONS NAME">
</div>
<div class="form-group col-sm-2 col-xs-12">
<label for="exampleInputnumber"> Insert Dates </label>
<input type="text" name="itndate[]" class="datepickers form-control form_line_only dateit" placeholder="DD/MM/YYYY">
</div>
<div class="form-group col-sm-2 col-xs-12">
<label for="exampleInputnumber"> Insert Day </label>
<select name="itnday[]" class="form_line_only form-control ">
<option>Monday</option>
<option>Tuesday</option>
<option>Wednesday</option>
<option>Thursday</option>
<option>Friday</option>
<option>Saturday</option>
<option>Sunday</option>
</select>
</div>
<div class="form-group col-sm-2 col-xs-12">
<label for="exampleInputnumber"> Pickup From </label>
<input type="text" name="itnpickfrom[]" class=" form-control form_line_only" placeholder="HOTEL">
</div>
<div class="form-group col-sm-2 col-xs-12">
<label for="exampleInputnumber"> Pickup Time </label>
<input type="text" name="itnpick[]" class="time timepiker form-control form_line_only" placeholder="6:30 AM">
</div>
<div class="form-group col-sm-1 col-xs-12">
<label for="exampleInputnumber"> Dropoff </label>
<input type="text" name="itndrop[]" class="time timepiker form-control form_line_only" placeholder="7:00 PM">
</div>
<span class="input-group-btn day_plan pull-left">
<button class="btn btn-success btn-add add_col" type="button"> <span class="glyphicon glyphicon-plus"></span> </button>
</span>
</div>
</div>
</div>
<br>
<small>(Press <span class="glyphicon glyphicon-plus gs"></span> to add another Day Plan)</small> </div>
谁能告诉我如何添加日期选择器并获取附加的值 div。
它已经在第一次加载时工作 div 但在附加的 div 输入上没有工作...
所有附加输入都有相同的 class..我做错了什么?请给我建议..
这里是jsfiidledemo
谢谢
检查这个 pen
var datePickerOption = {
showOtherMonths: true,
selectOtherMonths: true,
dateFormat: "dd/mm/yy",
minDate: 0,
onSelect: function(selectedDate) {}
}
$("body").on("focus", ".datepickers", function() {
var $context = $(this).parents('.entry_day_plan');
$($(this), $context).datepicker({
showOtherMonths: true,
selectOtherMonths: true,
dateFormat: "dd/mm/yy",
minDate: 0,
onSelect: function(selectedDate) {}
});
});
var count = 0;
$(function() {
$("body").on('click', '.btn-add', function(e) {
e.preventDefault();
count++;
var controlForm = $('.controls_day_plan:first'),
currentEntry = $(this).parents('.entry_day_plan:first'),
newEntry = $(currentEntry.clone()).appendTo(controlForm);
newEntry.find('input.datepickers').val('').attr('id', 'input_' + count).datepicker(datePickerOption);
controlForm.find('.entry_day_plan:not(:last) .btn-add')
.removeClass('btn-add').addClass('btn-remove')
.removeClass('btn-success').addClass('btn-danger')
.html('<span class="glyphicon glyphicon-minus"></span>');
newEntry.find(".datepickers").removeClass('hasDatepicker');
}).on('click', '.btn-remove', function(e){
$(this).parents('.entry_day_plan:first').remove();
e.preventDefault();
return false;
});
});
嗨,我想在附加 div 上显示日期选择器,但它只影响第一次加载 div。 每当我尝试在附加的 div 上附加 div 时,日期选择器不起作用。
这是我的代码。
$("body").on("focus", ".datepickers", function() {
var $context = $(this).parents('.entry_day_plan');
$($(this), $context).datepicker({
showOtherMonths: true,
selectOtherMonths: true,
dateFormat: "dd/mm/yy",
minDate: 0,
onSelect: function(selectedDate) {
//$("#cal4").datepicker("setDate", selectedDate);
}
});
});
$(function() {
$("body").on('click', '.btn-add', function(e) {
e.preventDefault();
var controlForm = $('.controls_day_plan:first'),
currentEntry = $(this).parents('.entry_day_plan:first'),
newEntry = $(currentEntry.clone()).appendTo(controlForm);
newEntry.find('input').val('hello');
controlForm.find('.entry_day_plan:not(:last) .btn-add').removeClass('btn-add').addClass('btn-remove').removeClass('btn-success').addClass('btn-danger').html('<span class="glyphicon glyphicon-minus"></span>');
newEntry.find(".datepickers").removeClass('hasDatepicker');
}).on('click', '.btn-remove', function(e) {
$(this).parents('.entry_day_plan:first').remove();
e.preventDefault();
return false;
});
});
这是一个 html 代码...
<div class="panel-body dayplan">
<!--Day Plan-->
<div class="control-group" id="fields">
<label class="control-label" for="field1">Please add Day Plan </label>
<div class="controls_day_plan">
<div class="entry_day_plan input-group col-sm-12 col-xs-12 ">
<div class="form-group col-sm-2 col-xs-12">
<label for="exampleInputnumber"> Excursion Name </label>
<input type="text" name="itnryname[]" class=" form-control form_line_only" placeholder="EXCURSIONS NAME">
</div>
<div class="form-group col-sm-2 col-xs-12">
<label for="exampleInputnumber"> Insert Dates </label>
<input type="text" name="itndate[]" class="datepickers form-control form_line_only dateit" placeholder="DD/MM/YYYY">
</div>
<div class="form-group col-sm-2 col-xs-12">
<label for="exampleInputnumber"> Insert Day </label>
<select name="itnday[]" class="form_line_only form-control ">
<option>Monday</option>
<option>Tuesday</option>
<option>Wednesday</option>
<option>Thursday</option>
<option>Friday</option>
<option>Saturday</option>
<option>Sunday</option>
</select>
</div>
<div class="form-group col-sm-2 col-xs-12">
<label for="exampleInputnumber"> Pickup From </label>
<input type="text" name="itnpickfrom[]" class=" form-control form_line_only" placeholder="HOTEL">
</div>
<div class="form-group col-sm-2 col-xs-12">
<label for="exampleInputnumber"> Pickup Time </label>
<input type="text" name="itnpick[]" class="time timepiker form-control form_line_only" placeholder="6:30 AM">
</div>
<div class="form-group col-sm-1 col-xs-12">
<label for="exampleInputnumber"> Dropoff </label>
<input type="text" name="itndrop[]" class="time timepiker form-control form_line_only" placeholder="7:00 PM">
</div>
<span class="input-group-btn day_plan pull-left">
<button class="btn btn-success btn-add add_col" type="button"> <span class="glyphicon glyphicon-plus"></span> </button>
</span>
</div>
</div>
</div>
<br>
<small>(Press <span class="glyphicon glyphicon-plus gs"></span> to add another Day Plan)</small> </div>
谁能告诉我如何添加日期选择器并获取附加的值 div。
它已经在第一次加载时工作 div 但在附加的 div 输入上没有工作... 所有附加输入都有相同的 class..我做错了什么?请给我建议..
这里是jsfiidledemo
谢谢
检查这个 pen
var datePickerOption = {
showOtherMonths: true,
selectOtherMonths: true,
dateFormat: "dd/mm/yy",
minDate: 0,
onSelect: function(selectedDate) {}
}
$("body").on("focus", ".datepickers", function() {
var $context = $(this).parents('.entry_day_plan');
$($(this), $context).datepicker({
showOtherMonths: true,
selectOtherMonths: true,
dateFormat: "dd/mm/yy",
minDate: 0,
onSelect: function(selectedDate) {}
});
});
var count = 0;
$(function() {
$("body").on('click', '.btn-add', function(e) {
e.preventDefault();
count++;
var controlForm = $('.controls_day_plan:first'),
currentEntry = $(this).parents('.entry_day_plan:first'),
newEntry = $(currentEntry.clone()).appendTo(controlForm);
newEntry.find('input.datepickers').val('').attr('id', 'input_' + count).datepicker(datePickerOption);
controlForm.find('.entry_day_plan:not(:last) .btn-add')
.removeClass('btn-add').addClass('btn-remove')
.removeClass('btn-success').addClass('btn-danger')
.html('<span class="glyphicon glyphicon-minus"></span>');
newEntry.find(".datepickers").removeClass('hasDatepicker');
}).on('click', '.btn-remove', function(e){
$(this).parents('.entry_day_plan:first').remove();
e.preventDefault();
return false;
});
});