Question

我已经实现了JQuery UI Datepicker但是在功能方面存在两个问题。实施代码在

之下

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

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

我遇到的另一个问题是将ui与bootstrap模式相结合。似乎有一个冲突阻止了月份和年份的下拉菜单正常运行。我试图改变日期选择器css的z-index，但收效甚微。

Answer 1

如果您已经使用jquery-ui作为日期选择器，为什么不继续将它用于模态对话框呢？如果您只使用一组库，它可以简化您的构建。

您可以在模式中嵌入日期选择器“内联”，而不是在叠加层中，然后使用altField选项填充表单的字段。

这样的事情：

<强> Working Example

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

JQuery UI日期选择器焦点

1 个答案: