jQuery UI 日期选择器不起作用答案

【问题标题】：jQuery UI Datepicker doesn't workjQuery UI 日期选择器不起作用
【发布时间】：2017-02-13 13:42:11
【问题描述】：

我在一个文件中的日期选择器工作正常，但在另一个文件中它根本不起作用。谁能指出问题出在哪里？

这是工作日期选择器的代码：

<script type="text/javascript">
$(document).ready(function(){
    $('.date').datepicker({
        changeYear: true,
        changeMonth: true,
        dateFormat: "dd.mm.yy",
        minDate: new Date(1950, 1 - 1, 1),
        maxDate: new Date(),
        yearRange: "1900:2015",
        closeText: "Zamknij",
        dayNames: [ "Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi" ],
        monthNames: [ "Styczeń", "Luty", "Marzec", "Kwiecień", "Maj", "Czerwiec", "Lipiec", "Sierpień", "Wrzesień", "Październik", "Listopad", "Grudzień" ],
        monthNamesShort: [ "Sty", "Lut", "Mar", "Kwie", "Maj", "Cze", "Lip", "Sie", "Wrz", "Paź", "Lis", "Gru" ]
    });
});

我在这里使用它：

        <div class="form-group ">
        <label class="col-sm-2" for="Client_birth_date">
            <?php echo $registerForm->labelEx($registerModel, 'birth_date'); ?>
        </label>
        <div class="col-sm-10">
          <?php echo $registerForm->textField($registerModel, 'birth_date', array('class' => 'input_form input_grup date form-control')); ?>
          <?php echo $registerForm->error($registerModel, 'birth_date'); ?>
        </div>
    </div>

而且效果很好。

但在另一个文件中我有相同的代码，但它根本不起作用。

脚本：

<script type="text/javascript">
$(document).ready(function(){
    $('#display-files').click(function(){
        $('#files-modal').modal({show:true});
    });
});

<script type="text/javascript">
$(document).ready(function(){
    $('.date').datepicker({
        changeYear: true,
        changeMonth: true,
        dateFormat: "dd.mm.yy",
        minDate: new Date(1950, 1 - 1, 1),
        maxDate: new Date(),
        yearRange: "1900:2015",
        closeText: "Zamknij",
        dayNames: [ "Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi" ],
        monthNames: [ "Styczeń", "Luty", "Marzec", "Kwiecień", "Maj", "Czerwiec", "Lipiec", "Sierpień", "Wrzesień", "Październik", "Listopad", "Grudzień" ],
        monthNamesShort: [ "Sty", "Lut", "Mar", "Kwie", "Maj", "Cze", "Lip", "Sie", "Wrz", "Paź", "Lis", "Gru" ]
    });
});

<script type="text/javascript">
$(document).ready(function(){
    $('#display-tags').click(function(){
        $('#tags-modal').modal({show:true});
    });
});

以及我使用它的地方：

<?= $aditionalCostForm->labelEx($aditionalCostModel, 'date'); ?>
<?= $aditionalCostForm->textField($aditionalCostModel, 'date', array(
    'class' => 'form-control btn-rect',
)); ?>

有什么解决办法吗？我会很感激的。

【问题讨论】：

检查控制台是否有错误。您是否正确包含了 jQuery 和 datepicker 库？
“不起作用” 并没有告诉我们太多。控制台有错误吗？
如果您需要日期选择器来处理模式的内容，我建议您确保代码在显示模式后运行（取决于框架，这可以通过事件或回调参数） .日期字段可能不在文档准备好的页面中。
在第一个示例中，当我单击文本字段时，窗口弹出，我可以选择日期。在第二个示例中，当我单击文本字段时没有任何反应。
您是动态加载第二个日期选择器字段吗？

标签： php jquery datepicker jquery-ui-datepicker

【解决方案1】：

在第一个示例中，您的“birth_date”文本字段具有“date”类：

<?php echo $registerForm->textField($registerModel, 'birth_date', array(
   'class' => 'input_form input_grup date form-control'
)); ?>

在第二个示例中，字段定义中没有“日期”类：

<?= $aditionalCostForm->textField($aditionalCostModel, 'date', array(
    'class' => 'form-control btn-rect',
)); ?>

所以 jquery 找不到需要的 dom 元素。

【讨论】：