Блог

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

В моем коде,

• DateTimePicker работает нормально.
• если вы добавите что-то вроде «#new_id’ num» в мой код dp.change, вы не сможете запустить и произойдет ошибка. «Ошибка неперехваченного типа: не удается прочитать свойство ‘minDate’ неопределенного

Мне нужно указать minDate amp; maxDate для моего сгенерированного cocoon 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,

        });       
  

приведенный ниже код не работает должным образом.
«Ошибка неперехваченного типа: не удается прочитать свойство ‘minDate’ неопределенного»
пожалуйста, помогите мне.

         $('#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);                    

        }); 
  

Обратный вызов 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 , чтобы вы могли соответствующим образом установить максимальную дату.