3

私は pikaday datepicker を使用しようとしています。依存関係と重いイメージのために jquery datepicker を避けようとしていますが、pikaday で目的を達成できません。

フォームに from to フィールドがあるのですが、to フィールドで選択できる日付が from フィールドを過ぎていてはいけません. 以下のようにしてみましたがうまくいきません。

var picker = new Pikaday({
    field: document.getElementById('start')
});
var picker2 = new Pikaday({
    field: document.getElementById('end'),
    minDate: new Date(document.getElementById('start').value)
});

純粋な JavaScript ソリューションの方が適しています。この問題を解決できる人はいますか?

4

2 に答える 2

8

次のメソッドsetMinDateを使用できます。setMaxDate新しい日付がpickaday コントロールによって選択された場合:

var picker = new Pikaday({
    field: document.getElementById('start'),
    onSelect: function() {
        picker2.setMinDate(this.getDate());
    }
});
var picker2 = new Pikaday({
    field: document.getElementById('end'),
    onSelect: function() {
        picker.setMaxDate(this.getDate());
    }
});

jsfiddle

于 2014-06-12T13:01:49.400 に答える
6

@A1Prunの回答を拡張して、正確な要件に一致させました。これが更新された回答です。誰かの役に立てば幸いです。

var picker = new Pikaday({
    field: document.getElementById('start'),
    minDate: new Date(),
    onSelect: function() {
        picker2.setMinDate(new Date(this.getDate().getTime()+parseInt(24*60*60*1000)));
        if(Number(new Date(this.getDate()))>Number(new Date(document.getElementById('end').value)))
        {
            document.getElementById('end').value="";
        }
    }
});
var picker2 = new Pikaday({
    field: document.getElementById('end'),
});
于 2014-06-12T12:01:33.593 に答える