2

フォームに 2 つのフィールドがあります。1 つは jQuery 日付ピッカーを使用する日付フィールドで、もう 1 つは jQuery 時間ピッカーです。問題は、日付フィールドで今日の日付を選択すると、時間ピッカーが過去の時間を表示してはならないということです。たとえば。現在の時刻が 17:00 の場合、タイムピッカーは 17:00 時間より前の時刻を選択可能として表示してはなりません。ここに私のコードがあります、

$(function() {
    $( ".datepicker" ).datepicker({minDate:'0'});
    $('.timepicker').timepicker();
});

$("#date").click(function(){
    if($("#date").val()=='04/17/2012')
    {
        updatetimefortoday();
    }
});![enter image description here][1]

function updatetimefortoday()
{
    $('.timepicker').timepicker({
        onHourShow: timepickerRestrictHours
    });

    function timepickerRestrictHours(hour)
    {
        if ((hour > 17))
        {
            return true;
        }
        return false;
    }
}

問題は、関数updatetimefortoday()onを呼び出すとdocument.ready、タイムピッカーが正しく表示されることです。しかし、コードに示されているように日付フィールドをクリックすると、機能しません。

ここに画像の説明を入力

これは、日付を選択した後に期待される出力です。

4

5 に答える 5

5

もう少し作業した後、これを行う最善の方法は常に onHourShow 関数を呼び出し、その関数で選択された日付を検証することであるという結論に達しました。空白のセルではなく、無効な時間がユーザーに表示されるため、これは優れていると思います。

$('#date').datepicker({
    minDate: 0
});
$('#time').timepicker({
    onHourShow: function( hour ) { 
        var now = new Date();
        // compare selected date with today
        if ( $('#date').val() == $.datepicker.formatDate ( 'mm/dd/yy', now ) ) {
            if ( hour <= now.getHours() ) {
                return false;
            }
        }
        return true;
    }
});​

ここに実際の例があります: http://jsfiddle.net/fgelinas/kUFgT/4/

Aymad Safadi によって報告された開始時間と終了時間の問題については、何ができるか見ていきます。これは間違いなくバグです。

于 2012-04-18T23:11:11.590 に答える
0

@FrancoisGelinas のアプローチ (標準的な jQuery UI の方法) を試してください。ライブラリのオプションのみを使用してください。この場合は「時間」です。

何かのようなもの：

$('.datepicker').datepicker({
    minDate:'0',
    onSelect: function()
    {

        if($("#date").val()=='04/18/2012')
        {
            $('.timepicker').timepicker( 'option', 'hours', {starts: 05, ends: 23});
        }
        else
        {
            $('.timepicker').timepicker( 'option', 'hours', {starts: 0, ends: 23});
        }
    }
});
$('.timepicker').timepicker();​

デモはこちら: http://jsfiddle.net/JbjLg/

とはいえ、timepicker ライブラリ自体にバグがあるようです。11 より大きい「開始」時間を選択すると、すべての時間が消えます。これを調べて、電子メールまたは彼のGitHubサイトの問題として作成者に通知することを強くお勧めします。

于 2012-04-18T13:31:28.380 に答える
0

タイムピッカーは、ドキュメント準備完了関数からの入力に既にアタッチされています。代わりに、この方法で onHourShow プロパティを変更できると思います:

$('.timepicker').timepicker( 'option', 'onHourShow', timepickerRestrictHours);
于 2012-04-17T12:49:16.437 に答える