JQuery UI日期选取器焦点

JQuery UI Date Picker Focus

本文关键字：焦点 选取 日期 UI JQuery      更新时间：2024-04-27

我已经实现了JQuery UI日期选择器，但在功能上有两个问题。实现代码低于

<script type="text/javascript">
    $(document).ready(function(){
        $(".datepicker").datepicker({
            dateFormat: 'dd/mm/yy',
            changeMonth: true,
            changeYear: true,
            yearRange: '-100y:c+nn'
        });
    });
</script>

第一期：在标准页面上，这似乎很好用，尽管日历在选择一天时会失去焦点。由于我来自英国，专注于英国用户，我们通常的日期格式是从日期开始->然后选择月份->然后选择年份。作为一个可用性问题，我测试过的大多数用户一开始都会输入日期选择器消失的日期。有没有一种简单的方法可以格式化ui，使其在点击年份时失去注意力？

我遇到的另一个问题是将ui与引导模式相结合。似乎有一场冲突阻止了每月和每年的下降正常运行。我尝试过更改日期选择器css的z索引，但收效甚微。

如果您已经将jquery ui用于日期选择器，为什么不继续将其用于模式对话框呢？如果您只利用一组库，它可能会稍微简化您的构建。

您可以显示日期选择器"内联"，嵌入在模态中而不是覆盖中，然后使用altField选项填充表单的字段。

类似这样的东西：

工作示例

<form>Date:
    <input class="date"></input>
    <div id="dialog-message" title="Pick A Date">
        <div class="datepicker"></div>
    </div>
</form>
$('.date').click(function () {
    $(".datepicker").datepicker({
        dateFormat: 'dd/mm/yy',
        changeMonth: true,
        changeYear: true,
        yearRange: '-100y:c+nn',
        altField: ".date"
    });
    $("#dialog-message").dialog({
        modal: true,
        resizable: false,
        width: 340,
        buttons: {
            Ok: function () {
                $(this).dialog("close");
            }
        }
    });
});
相关文章：