Question

我试图使用pikaday日期选择器，我试图避免使用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 control选择新日期后，您可以使用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'),
});

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

2 个答案:

jsfiddle