Как я могу поставить min & maxDate для coconn & DateTimePicker

Question

Я хотел бы поставить min & maxDate для моего сгенерированного DateTimePicker кокона. В моем приложении я мог бы поместить уникальный идентификатор для моего html, сгенерированного коконом.

В моем коде

• DateTimePicker работает нормально.
• если вы добавите что-то вроде "#new_id'+num" в мой код dp.change, вы не сможете запустить и произошла ошибка. "Uncaught TypeError: Невозможно прочитать свойство 'minDate' из неопределенного

Мне нужно поставить minDate & maxDate для моего сгенерированного DateTimepicker кокона.

Как я должен сделать?

var num = 0;
$(function() {
$('#tickets').on('cocoon:before-insert', function(e,ticket_to_be_added) {
 ticket_to_be_added.fadeIn('slow');
 ticket_to_be_added.attr('id', 'new_id'+ num);
});
$('#tickets').on('cocoon:after-insert', function(e,added_ticket) {
 set_datetimepicker();
 num++;
});
}

и set_datetimepicker(); ниже

function set_datetimepicker(){

var d = new Date();
d.setDate(d.getDate() + 6);
var y = new Date();
y.setDate(y.getDate() + 365);
var a = new Date();
a.setDate(a.getDate());
var b = new Date();
b.setDate(b.getDate() + 365);

       $('#new_id'+num+' .datetimepicker1').datetimepicker({
                    format: 'YYYY/MM/DD HH:mm',
                    showClose:true,                    
                    useCurrent:false,
                    minDate: d,
                    maxDate: y,
                    stepping: 15,
        });      

        $('#new_id'+num +' .datetimepicker2').datetimepicker({
                    format: 'YYYY/MM/DD HH:mm',
                    showClose:true,                    
                    useCurrent:false,
                    minDate: d,
                    maxDate: y,
                    stepping: 15,
        });      
        $('#new_id'+num +' .datetimepicker3').datetimepicker({
                    format: 'YYYY/MM/DD HH:mm',         
                    showClose:true,
                    useCurrent:false,
                    minDate: a,
                    maxDate: b,    
                    stepping: 15,

        });       

эти коды ниже не работают хорошо. "Uncaught TypeError: Не удалось прочитать свойство 'minDate' из undefined", помогите мне.

        $('#new_id'+num +' .datetimepicker1').on("dp.change", function (e) 
         $('#new_id'+num +' .datetimepicker2').data("DateTimePicker").minDate(e.date);
        });               
        $('#new_id'+num  +' .datetimepicker2').on("dp.change", function (e) {
            $('#new_id'+num  +' .datetimepicker1').data("DateTimePicker").maxDate(e.date);
            $('#new_id'+num  +' .datetimepicker3').data("DateTimePicker").maxDate(e.date);    
        }); 
        $('#new_id'+num  +' .datetimepicker3').on("dp.change", function (e) {

            $('#new_id'+num  +' .datetimepicker2').data("DateTimePicker").maxDate(e.date);                    

        }); 

Answer 1

Обратный вызов Cocoon дает вам вставленный HTML, так что вместо того, чтобы возиться с идентификаторами, просто используйте его:) Вы делаете это правильно в before-insert при установке идентификатора. Вместо этого я предлагаю: не устанавливать конкретный идентификатор, а просто использовать вставленный / добавленный HTML (который уже обернут в селектор jquery).

Так что, если вы передадите новый билет в вашу функцию, как

set_datetimepicker(added_ticket); 

тогда в вашем set_datetimepicker Вы можете просто использовать это (вместо того, чтобы пытаться найти это снова).

added_ticket.find('.datetimepicker1').data('DateTimePicker').maxDate(...)

Это теория. Теперь, глядя на ваш код более подробно, я вижу, что у вас есть три средства выбора даты и времени, и когда они меняются, они должны изменить / отразить это в своих родственных средствах выбора даты и времени.

Вы можете просто положиться на JQuery .on функциональность и относительная близость указателей даты и времени, в этом случае нет необходимости в обратных вызовах.

Так что сделайте что-то вроде:

$('#tickets').on('dp.change', '.datetimepicker1', function(e) {
   $(this).closest('.nested-fields').find('.datetimepicker2').data("DateTimePicker").maxDate(e.data);
})

Так что всякий раз, когда .datetimepicker1 изменяется, был ли он вставлен динамически или нет, если он находится внутри #tickets div, данный обратный вызов будет обработан. Обратный звонок будет сначала искать окружающие .nested-fields Div, а затем найти хотел .datetimepicker2 так что вы можете установить максимальную дату соответственно.