首页 文章

wbraganca yii2动态表格日期选择器问题?

提问于
浏览
2

我正在使用wbraganca动态表单 . 在我的表格中,一个字段需要日期选择器,所以我使用如下的jui日期选择器

<?= $form->field($model, "[{$i}]DOB")->widget(DatePicker::classname(), [
                         'language' => 'en',
                         'options' => ['class'=>'cust-form-control dob','placeholder'=>'Date of birth','autocomplete'=>'off','readOnly'=>true,'aria-label' => 'Date of Birth'],
                          'clientOptions'=>[
                            'changeMonth'=>true,
                            'changeYear'=> true,
                            'yearRange'=> "1925:+0",
                            'dateFormat' => 'dd/mm/yy',
                            'maxDate' => "-1D",
                          ],
                    ])->label(false); ?>

早些时候我面临一个问题,那就是日期选择器只打开第一个表单,如果用户点击添加按钮意味着表单会出现但是datepicker没有出现,所以我添加一个自定义脚本如下

$(function () {
$(".dynamicform_wrapper").on("afterInsert", function(e, item) {
     $( ".dob" ).each(function() {
        $( this ).datepicker({
        dateFormat : 'dd/mm/yy',
        yearRange : '1925:+0',
        maxDate : '-1D',
        language : 'en',
        changeMonth: true,
        changeYear: true
      });
    });          
});

});

因此日期选择器正确打开所有表单,我打开多个表单并逐个选择日期选择器意味着它正常工作 . 但问题是例如,首先我打开两个表单并关闭第一个表单,现在第二个表单首先出现在那个时候日期选择器将出现但它不可点击 .

1 回答

  • 2

    使用 afterDelete 并重新初始化datepicker:

    $this->registerJs(' 
    $(function () {
        $(".dynamicform_wrapper").on("afterInsert", function(e, item) {
            $( ".dob" ).each(function() {
               $( this ).datepicker({
                  dateFormat : "dd/mm/yy",
                  yearRange : "1925:+0",
                  maxDate : "-1D",
                  changeMonth: true,
                  changeYear: true
               });
          });          
        });
    });
    $(function () {
        $(".dynamicform_wrapper").on("afterDelete", function(e, item) {
            $( ".dob" ).each(function() {
               $( this ).removeClass("hasDatepicker").datepicker({
                  dateFormat : "dd/mm/yy",
                  yearRange : "1925:+0",
                  maxDate : "-1D",
                  changeMonth: true,
                  changeYear: true
               });
          });          
        });
    });
    ');
    

    need to remove class hasDatepicker 重新初始化datepicker .

相关问题