bugfix> javascript > 投稿

ページに2つのdatetimepickerがあります。 「SartDate」および「EndDate」という名前。StartDateで日付を選択し、この日付は「EndDate」のminDateとして設定されます。初回は正常に機能しますが、「StartDate」の日付はリセットされ、「EndDate」のminDateは 再初期化

var date = null;
    $("#jobPublishDate").bind("keyup blur change mouseup", function () {
    $('#jobPublishDate').datetimepicker({ format: 'DD/MM/YYYY H:mm', showTodayButton: true, showClear: true, showClose: true });
        var from = $("#jobPublishDate").val().split("/");
        var newdate = from[1] + "/" + (from[0]) + "/" +from[2];
        var f = new Date(newdate);
        date = f;
    });
    $("#jobCloseDate").focusin(function () {
    $('#jobCloseDate').datetimepicker({ format: 'DD/MM/YYYY H:mm', showTodayButton: true, showClear: true, showClose: true, minDate: date });
           });
       });

<label>StartDate></label>
<input ng-model="job.StrPublishDate" id="jobPublishDate">
<br/>
<label>EndDate></label>
<input ng-model="job.StrCloseDate" id="jobCloseDate">

回答 2 件
  • あなたは dp.change にフックする必要があります  イベント(日付が選択されたときに発生) minDate を使用  2番目のピッカーに最小日付を設定するメソッド。

    var date = null;
    $("#jobPublishDate").bind("keyup blur change mouseup", function () {
        $('#jobPublishDate').datetimepicker({ format: 'DD/MM/YYYY H:mm', showTodayButton: true, showClear: true, showClose: true })
        var from = $("#jobPublishDate").val().split("/");
        var newdate = from[1] + "/" + (from[0]) + "/" +from[2];
        var f = new Date(newdate);
        date = f;
    });
    // Adds the date change event to the first picker
    $("#jobPublishDate").on('db.change', function (e) {
        // Get the DateTimePicker instance
        var dp = $('#jobCloseDate').data('DateTimePicker');
        // If the second picker has been initialized
        if(typeof dp !== 'undefined') {
            // Set the minimum date on the second picker
            dp.minDate(e.date);
        } else {
            // If the close date picker is not initialized, stores the date for later use
            date = e.date;
        }
    });
    $("#jobCloseDate").focusin(function () {
        $('#jobCloseDate').datetimepicker({ format: 'DD/MM/YYYY H:mm', showTodayButton: true, showClear: true, showClose: true, minDate: date });
    });
    
    

    DateTimePickerメソッドの詳細については、こちらをご覧ください。

  • var date = null;
    $("#jobPublishDate").bind("keyup blur change mouseup", function () {
    var from = $("#jobPublishDate").val().split("/");
    var newdate = from[1] + "/" + (from[0]) + "/" + from[2];
    var f = new Date(newdate);
    date = f;
    $("#jobPublishDate").on('dp.change', function (e) {
    var dp = $('#jobCloseDate').data('DateTimePicker');
    if (typeof dp !== 'undefined') {
    dp.minDate(e.date);
    } 
    else {
    date = e.date;
    }
    });
    $("#jobCloseDate").focusin(function () {
    $('#jobCloseDate').datetimepicker({ format: 'DD/MM/YYYY H:mm', showTodayButton: true, showClear: true, showClose: true, minDate: date });
    });
    
    

    このコードに従って、問題を解決してください。

あなたの答え