Search code examples
javascriptdatepickerpikaday

Creating a date range fields with pikaday datepicker

I'm trying to use the pikaday datepicker, I'm trying to avoid jquery datepicker because of its dependancies and heavy images, but I can't achieve what I want with pikaday.

I have a from to field in a form, The date that can be selected in the to field shouldn't be past to the from field.. I tried like below but it is not working.

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

A Pure javascript solution is better for me, Anyone can guide me in this problem?

Solution

  • You can use the methods setMinDate and setMaxDate when a new date is selected by the pickaday control:

    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