jQuery UI DateTimePicker没有'不起作用

jQuery-UI DateTimePicker doesn't work

本文关键字：不起作用 没有 UI DateTimePicker jQuery      更新时间：2023-09-26

我需要用jquery ui开发一个日期时间选择器Input。我已经开发了一个日期选择器，同样的功能也很完美。问题是DateTimePicker显示的是一个日期选择器，因此选择了缺少时间。

下面是DatePicker正常工作的函数：

function initInputDate() {
    //Regionaliza o datepicker

    //Seleciona todos os Inputs de Data
    $("*").on("focus", ".inputData", function() {
        $.datepicker.setDefaults($.datepicker.regional[ "pt-BR" ]);
        //Adiciona o plugin datepicker do JQuery-UI aos inputs de data
        $(this).datepicker({
            showAnim: 'slideDown',
            dateFormat: 'dd/mm/yy',
            changeMonth: true,
            changeYear: true
        });

    });
}

下面的这个函数是错误的。她正在显示DatePicker，但应该显示DateTimePicker。我已经意识到显示的DateTimePicker与上面函数中显示的不同，即它们是不同的组件，因为我删除了按钮，但它们在下面的函数中显示为false DateTimePicker。

function initInputDateTime() {
    //Seleciona todos os Inputs de Data
    $("*").on("focus", ".inputDataHora", function() {
        //Adiciona o plugin datepicker do JQuery-UI aos inputs de data
        $(this).datetimepicker({
            showAnim: 'slideDown',
            dateFormat: 'dd/mm/yy',
            changeMonth: true,
            changeYear: true
        });
    });
}

我很关心脚本：

jquery-ui-timepicker-addon.js
jquery.js
jquery-ui-1.9.2.custom.min.js

此图像显示错误的日期选择器-必须是日期时间选择器：

输入的HTML：

<tr>
  <td>
    <b>Data e Hora da Análise:* </b>
  </td>
  <td>
    <input id="dsAnalise" class="input inputDataHora hasDatepicker" type="text" size="15" maxlength="16" value="" name="dsAnalise">
  </td>
</tr>

非常感谢！

你所做的完全是错误的。datepicker和datetimepicker只需要为每个字段启动一次，而不需要在每个焦点上启动。他们正在展示自己，你不必在那里做任何事情。

因此，为了纠正这一点，生成的代码如下：

function initInputDate() {
    $.datepicker.setDefaults($.datepicker.regional[ "pt-BR" ]);
    $('.inputDataHora').datepicker({
            showAnim: 'slideDown',
            dateFormat: 'dd/mm/yy',
            changeMonth: true,
            changeYear: true
    });    
}

function initInputDateTime() {
    //Seleciona todos os Inputs de Data
    $(".inputData").datetimepicker({
            showAnim: 'slideDown',
            dateFormat: 'dd/mm/yy',
            changeMonth: true,
            changeYear: true
    });
}

然后应该按以下顺序添加jQuery JS文件：

jquery.js
jquery-ui-1.9.2.custom.min.js
jquery-ui-timepicker-addon.js

我只是解决了这个问题。解决方案是替换一些像jquery-ui.min.js这样的脚本，并对其进行重组，就像我有一个名为main.js的脚本，其他脚本运行javascript/jquery一样。

下面我展示了脚本的组织：

<script type="text/javascript" src="/fwsibe/sistema/libraries/interface/javascript/jquery/lib/jquery.js"></script>
<script type="text/javascript" src="/fwsibe/sistema/libraries/interface/javascript/jquery/lib/jquery-ui/jquery-ui.min.js"></script>
<script type="text/javascript" src="/fwsibe/assets/jquery/js/jquery-ui-sliderAccess.js"></script>

在这里，我显示了初始化脚本的main.js文件：

    var dirJquery = "/fwsibe/sistema/libraries/interface/javascript/jquery/";
    var dirJqueryPlugins = dirJquery + "plugins/";
    var dirScriptsEvento = dirJquery + "scripts/eventos/";
    var dirJqueryUi = dirJquery + "lib/jquery-ui/";
    var arrayScripts = new Array(
        dirJqueryPlugins + "datepicker/jquery-ui-timepicker-addon.js",
        dirScriptsEvento + "Menu.js",
        dirScriptsEvento + "Dialog.js",
        dirScriptsEvento + "Button.js",
        dirScriptsEvento + "Template.js",
        dirScriptsEvento + "Select.js",
        dirScriptsEvento + "InputDate.js",
        dirJqueryPlugins + "jquery.maskedinput.min.js",
        dirJqueryPlugins + "jquery.ba-replacetext.min.js",
        dirJqueryPlugins + "jquery.ba-hashchange.min.js",
        dirJqueryPlugins + "jquery.form.min.js",
        dirJqueryPlugins + "fancybox/jquery.fancybox.pack.js"
        );
$(function() {
    //Carrega os scripts JQuery
    loadScripts();
});
/**
 * Recarrega os scripts de evento jQuery sempre que um determinado evento acontece
 */
function loadScripts() {
    for (var i = 0; i < arrayScripts.length; i++) {
        jQuery.getScript(arrayScripts[i]);
    }
相关文章：