jQuery UI日期选择器重点

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>

第一个问题：在标准页面上，这似乎很好用，尽管选择某天后日历会失去焦点。 由于我来自英国，并且主要针对英国用户，因此我们正常的日期格式是从日期->然后选择月份->然后选择年份开始。 作为可用性问题，看来大多数用户在开始输入日期之后就对它进行了测试，从而使日期选择器消失了。 是否有一种简单的方法来设置ui格式，以使其不再关注单击年份？

我遇到的另一个问题是将ui与引导程序模式结合在一起。 似乎存在冲突，导致月份和年份下拉列表无法正常运行。 我尝试更改日期选择器css的z索引，但收效甚微。

Answer 1

如果您已经将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");
            }
        }
    });
});