如何使Datebox Jquery Mobile輸入字段可單擊？

Question

我有兩個日期字段。 字段2正常工作。 在第二個字段的輸入類型日期上單擊任意位置可打開日歷。 但是對於初次約會字段卻不起作用。 當我單擊日期字段的日歷圖標時，它會打開日歷，但我也希望在單擊字段1的日期字段中的任何位置時彈出該日歷。 為什么它適用於第二個字段但不適用於第一個字段。

同樣，默認日期未設置為今天。

http://jsfiddle.net/KJ4e5/3/

的HTML

<body>
    <div id="doc">
<table>
<tr>
                        <td>

                         <input name="date1" id="date1" type="date"  data-role="datebox" data-options='{"mode": "calbox","dateFieldOrder":["d","m","y"], "useNewStyle":true,"overrideDateFormat": "%d/%m/%Y", "afterToday":true}' />
                        </td>
                        <td>

                            <input name="date2" id="date2" type="date" data-role="datebox" data-options='{"mode": "calbox","dateFieldOrder":["d","m","y"], "useNewStyle":true,"overrideDateFormat": "%d/%m/%Y", "afterToday":true}'/>
                        </td>
                    </tr>
</table>
        </div></body>

// JS

$( document ).on( "pageinit", "#doc", function() { 
    var defaultPickerValue = new Date();
    var today = defaultPickerValue.getDate() + "/" + (defaultPickerValue.getMonth()+1) + "/" + defaultPickerValue.getFullYear();

     $('#date1').val(today);
     $('#date2').val(today);

$('#date1').on('change', function() {
        if ( $('#date2')) {
            $('#date2').val($('#date1').val());
              var temp = new Date();
              var start = $('#date1').datebox('getTheDate');
              var diff = parseInt((start - temp) / ( 1000 * 60 * 60 * 24 ));
              diffstrt = (diff * -1)-1; 
            $("#date2").datebox("option", {
                "minDays": diffstrt
            });
        }
    });

});

Answer 1

我無法解釋為什么這兩個框的行為不同，但是如果您將useFocus選項明確分配給兩個框，則它們都將起作用：

<input name="date1" id="date1" type="date" data-role="datebox" 
    data-options='{"mode": "calbox","dateFieldOrder":["d","m","y"], 
                   "useNewStyle":true, "overrideDateFormat": "%d/%m/%Y",
                   "afterToday":true, "centerHoriz": true, "useFocus": true}' />

這是您更新的FIDDLE

在小提琴中，我還對您的腳本進行了一些更改。 使用日期框，您可以按以下方式設置日期：

var defaultPickerValue = new Date();
$('#date1').datebox('setTheDate', defaultPickerValue).trigger('datebox', {'method':'doset'});


$('#date1').on('change', function () {
    if ($('#date2')) {
        var temp = new Date();
        var start = $('#date1').datebox('getTheDate');
        $('#date2').datebox('setTheDate', start).trigger('datebox', {'method':'doset'});
        var diff = parseInt((start - temp) / (1000 * 60 * 60 * 24));
        diffstrt = (diff * -1) - 1;
        $("#date2").datebox("option", {
            "minDays": diffstrt
        });
    }
});

如何使Datebox Jquery Mobile輸入字段可單擊？

問題描述

1 個解決方案

解決方案1
3 已采納 2014-06-03 13:10:53

如何使Datebox Jquery Mobile輸入字段可單擊？

問題描述

1 個解決方案

解決方案1 3 已采納 2014-06-03 13:10:53

解決方案1
3 已采納 2014-06-03 13:10:53