如何为 coconn 和 DateTimePicker 设置最小和最大日期

Question

我想为我的茧生成的 DateTimePicker 设置 min 和 maxDate。 在我的应用程序中，我可以管理为我的茧生成的 html 放置唯一 id。

在我的代码中，

• DateTimePicker 工作正常。
• 如果您在我的 dp.change 代码中添加“#new_id'+num”之类的内容， 你不能开火并且发生错误。 “未捕获的类型错误：无法读取未定义的属性 'minDate'

我需要为我的茧生成的 DateTimepicker 设置 minDate 和 maxDate。

我该怎么办？

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);                    

        }); 

Answer 1

cocoon 回调会为您提供插入的 html，因此无需摆弄 id，只需使用它即可：) 在设置 id 时，您可以在 before-insert 中正确执行此操作。相反，我建议：not 设置一个特定的 id，只使用插入/添加的 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，以便您可以相应地设置最大日期。