使用pikaday datepicker創建日期范圍字段

Question

我正在嘗試使用pikaday datepicker，我試圖避免jquery datepicker因為它的依賴性和沉重的圖像，但我無法實現我想要的pikaday。

我在一個表單中有一個from to field，可以在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解決方案對我來說更好，任何人都可以指導我解決這個問題？

Answer 1

當pickaday控件選擇新日期時，您可以使用方法setMinDate和setMaxDate ：

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

Answer 2

我延長了@ 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'),
});