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