使用皮卡日日期选择器创建日期范围字段

Question

我试图使用pikaday日期picker，我试图避免jquery日期picker，因为它的依赖性和沉重的图像，但我不能实现我想要的与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解决方案是更好的为我，谁能指点我一下这个问题?

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'),
});