0

SOの周りにはこの問題に関する非常に多くの役立つトピックがあるようですが、それらすべてを組み合わせることができません. スタンドアロンでうまく機能します。しかし、それは私が問題を抱えている機能を組み合わせています。

私が持っているもの：

  1. jquery datepicker を使用する「from」および「to」入力フィールド。
  2. ユーザーが「開始日」を選択すると、「終了日」は、選択した日付に基づいて +4 日先の日付を選択できるようになります。（編集済み）
  3. 3 番目の非表示のフィールドは、選択間の日数を計算します。

ここに私が現在持っているもののフィドルがあります：http://jsfiddle.net/hVnRu/

問題：

  1. ユーザーがある月で「開始日」を選択し、別の月で「終了日」を選択した場合 (例: 2013 年 8 月 30 日 - 2013 年 9 月 2 日)、計算フィールドは正しくありません。
  2. 「to」フィールドは、以前に選択したフィールドからの minDate 4+ 日を考慮していません。

そして最後に、これが私のコードです（これはすべて上記のフィドルにあります）：

$(function () {
$("#from, #to").datepicker({
    onSelect: function () {
        var from = new Date($("#from").val().split("/").reverse().join(","));
        var to = new Date($("#to").val().split("/").reverse().join(","));
        var total = ((to - from) / 2592000000);
        var rounded = Math.round(total);
        $("#totaldays").val(rounded);

    }
});
$("#from").datepicker({
    minDate: 4,
    defaultDate: "+1w",
    changeMonth: true,
    numberOfMonths: 2,
    onClose: function (selectedDate) {
        $("#to").datepicker("option", "minDate", selectedDate);
    }
});
$("#to").datepicker({
    defaultDate: "+1w",
    changeMonth: true,
    numberOfMonths: 2,
    onClose: function (selectedDate) {
        $("#from").datepicker("option", "maxDate", selectedDate);
    }
});

});

これを手伝ってくれる人に感謝します。

4

1 に答える 1

1

私の答えを受け入れた後、ここに私のコードの正しいバージョンがあります。基本的に、目的を達成するのは非常に簡単です。誰かが開始日を選択した場合、#todatepicker の最初の可能な日は 4 日先になります。そのため、minDateオプションを使用し、新しい日付を で計算しますsetDate。2 番目の日付が選択された後、2 つの日付を減算する関数を呼び出して差を出しtotalDays()、この差を日数に変換します。ユーザーが最初に日付を選択した場合、#toも呼び出しますtotalDays()が、負の日を表示しないように、#from日付が設定されているかどうかを確認します。そうでない場合 (または日が負の場合) は、値を表示しません。

 $(function () {
    $("#from").datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 2,
        minDate: 4,
        onSelect: function (selectedDate) {
            //set #to date +4 days in the future, starting from #from date
            var fromDate = new Date(selectedDate);
            var minDate  = new Date(fromDate.setDate(fromDate.getDate() + 4));

            $("#to").datepicker("option", "minDate", minDate);
        },
        onClose: function (selectedDate) {
            //alternatively call it in onSelect
            totalDays();
        }
    });
    $("#to").datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 2,
        minDate: 4,
        onClose: function (selectedDate) {
            //alternatively call it in onSelect
            totalDays();
        }
    });

    function totalDays() {
        //subtract the two Date objects, convert seconds to days
        var from    = $('#from').datepicker('getDate');
        var to      = $('#to').datepicker('getDate');
        var seconds = to - from;
        var days    = Math.ceil(seconds / (1000 * 3600 * 24));

        //dont fill in value if only #to has a valid
        if (days > 0 && from) {
            $('#totaldays').val(days);
        }
    }

});

jsfiddle デモ

于 2013-08-09T18:09:32.977 に答える