2

#start_time および #end_time id を持つ 2 つのファイルでjQuery timepicker アドオン ( https://github.com/trentrichardson/jQuery-Timepicker-Addon ) を使用しています。#end_time を大きくするか、#start_time の時刻から開始する必要があります。以下のコードを試しましたが、jQueryが苦手です。

$(function() {
$('#start_time').timepicker({ 
    onClose: function(timeText, inst) {
        if ($('#end_time').val() != '') {
            var testStartTime = $('#start_time').timepicker('getTime');
            var testEndTime = $('#end_time').timepicker('getTime');
            if (testStartTime > testEndTime)
                $('#end_time').timepicker('setTime', testStartTime);
        }
        else {
            $('#end_time').val(timeText);
        }
    },
    onSelect: function (selectedTime){
        $('#end_time').timepicker('option', 'minTime', $('#start_time').timepicker('getTime') );
    }
});
$('#end_time').timepicker({ 
    onClose: function(timeText, inst) {
        if ($('#start_time').val() != '') {
            var testStartTime = $('#start_time').timepicker('getTime');
            var testEndTime = $('#end_time').timepicker('getTime');
            if (testStartTime > testEndTime)
                $('#start_time').timepicker('setTime', testEndTime);
        }
        else {
            $('#start_time').val(timeText);
        }
    },
    onSelect: function (selectedTime){
        $('#start_time').timepicker('option', 'maxTime', $('#end_time').timepicker('getTime') );
    }
});
});

start_time と end_time の 2 つの時間入力があります。

4

4 に答える 4

3 
        var startDateTextBox = $('#dialog_missionAdd input[name=scheduleStarttime]');
        var endDateTextBox = $('#dialog_missionAdd input[name=scheduleEndtime]');

        startDateTextBox.timepicker({ 
            defaultValue: "00:00",
            timeFormat: "HH:mm",
            onClose: function(dateText, inst) {
                if (endDateTextBox.val() != '') {
                    var testStartTime = startDateTextBox.datetimepicker('getDate');
                    var testEndTime = endDateTextBox.datetimepicker('getDate');
                    if (testStartTime > testEndTime) {
                        endDateTextBox.timepicker('setDate', testStartTime); }
                }
                else {
                    endDateTextBox.val(dateText);
                }
            },
            onSelect: function (selectedDateTime) {
                endDateTextBox.datetimepicker('option', 'minDate', startDateTextBox.datetimepicker('getDate') );
            }
        });

        endDateTextBox.timepicker({ 
            defaultValue: "00:00",
            timeFormat: "HH:mm", 
            onClose: function(dateText, inst) {
                if (startDateTextBox.val() != '') {
                    var testStartTime = startDateTextBox.datetimepicker('getDate');
                    var testEndTime = endDateTextBox.datetimepicker('getDate');
                    if (testStartTime > testEndTime) {
                        startDateTextBox.timepicker('setDate', testEndTime); }
                }
                else {
                    startDateTextBox.val(dateText);
                }
            },
            onSelect: function (selectedDateTime) {
                startDateTextBox.datetimepicker('option', 'maxDate', endDateTextBox.datetimepicker('getDate') );
            }
        });
于 2012-12-10T09:31:35.427 に答える
2

この実用的なデモを試してください: http://jsfiddle.net/fMnw8/

使い方：

  • end_time選択するまで、ユーザーは選択できませんstart_time
  • そして、マッチングとさらなる条件をAMチェックしました。PM

これは、遊ぶのに十分なヒントを与えてくれます。

それがあなたの原因に合うことを願っています:)

コード

$(function() {
    $('#start_time').timepicker({
        timeFormat: 'hh:mm TT',
        ampm: true,
        hour: 10,
        onSelect: function(selectedTime) {
            sHours = parseInt(selectedTime.substring(0, 2));
            sMins = parseInt(selectedTime.substring(3, 6));
            sAmpm = selectedTime.substring(6, 8);

            if (sAmpm == 'PM') {
                sHours = sHours + 12;
            }

            $('#end_time').remove();
            start_val = $('#start_time').val();
            $('<input id="end_time" value="' + start_val + '"/>').timepicker({
                timeFormat: "hh:mm TT",
                hourMin: sHours,
                sMinutes: sMins,
                ampm: true,
                hour: 10,
                onSelect: function(selectedTime) {
                    eHours = parseInt(selectedTime.substring(0, 2));
                    eMins = parseInt(selectedTime.substring(3, 6));
                    eAmpm = selectedTime.substring(6, 8);

                    if (eAmpm == sAmpm) {
                        if (sHours > eHours || sMins > eMins) {
                            alert('Sorry -Time is greater then start time');
                            $('#end_time').val("");
                            return false;
                        }
                    }
                }
            }).insertAfter('#start_time');
        }
    });
});​
于 2012-10-13T04:17:31.847 に答える
2

私はいくつかのことを変更しましたが、現在は機能しています。ここにコードがあります

<script>
$(document).ready(function () {

$('#start_time').timepicker({ 
    timeFormat: "hh:mm TT",
    ampm: true,
    hourMin: 8,
    hourMax: 18,
    onClose: function(dateText, inst) {
        if ($('#end_time').val() != '') {
            var testStartTime = $('#start_time').datetimepicker('getDate');
            var testEndTime = $('#end_time').datetimepicker('getDate');
            if (testStartTime > testEndTime) {
                $('#end_time').timepicker('setDate', testStartTime); }
        }
        else {
            $('#end_time').val(dateText);
        }
    },
    onSelect: function (selectedDateTime){
        if (testStartTime > testEndTime) {
        $('#end_time').datetimepicker('option', 'minDate', $('#start_time').datetimepicker('getDate') );
        }
    }
});

$('#end_time').timepicker({ 
    timeFormat: "hh:mm TT",
    ampm: true,
    hourMin: 8,
    hourMax: 18,    
    onClose: function(dateText, inst) {
        if ($('#start_time').val() != '') {
            var testStartTime = $('#start_time').datetimepicker('getDate');
            var testEndTime = $('#end_time').datetimepicker('getDate');
            if (testStartTime > testEndTime) {
                $('#start_time').timepicker('setDate', testEndTime); }
        }
        else {
            $('#start_time').val(dateText);
        }
    },
    onSelect: function (selectedDateTime){
        if (testStartTime > testEndTime) {
        $('#start_time').datetimepicker('option', 'maxDate', $('#end_time').datetimepicker('getDate') );
        }
    }
});

});
</script>

手伝ってくれてありがとう。

于 2012-10-13T04:42:00.210 に答える
1

開始するには、 https: //stackoverflow.com/a/2694937/243639 をのぞいてみてください。特に興味深いのは、 を含む行です$('#endDate').datepicker("option", 'minDate', new Date(dateText));。一方のタイムピッカーの onSelect 関数で新しい日付を使用して、もう一方の minDate (または maxDate) を設定できます。

timepicker は、他の SO 投稿で言及されている jQuery datepicker の拡張であるため、ソリューションは timepicker にも適用する必要があります。

于 2012-10-13T03:56:02.663 に答える