javascript - 使用 pikaday datepicker 创建日期范围字段

Question

我正在尝试使用 pikaday 日期选择器，我试图避免使用 jquery 日期选择器，因为它具有依赖性和大量图像，但我无法通过 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

您可以使用这些方法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

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