javascriptcalendarpikaday

unable to set calendar start date in pikaday calendar


When i trigger the start date input box, I want to show the future or past month in calendar popup as a starting date in end date calendar.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://dbushell.com/Pikaday/css/pikaday.css">
    <link rel="stylesheet" href="https://dbushell.com/Pikaday/css/site.css">
</head>
<body>
    <input type="text" id="datepicker">
    <br/>
    <input type="text" id="datepicker2">
    <script src="https://cdn.jsdelivr.net/momentjs/2.14.1/moment-with-locales.min.js">    </script>
    <script src="https://dbushell.com/Pikaday/pikaday.js">    </script>
    <script>
    var picker = new Pikaday({
        field: document.getElementById('datepicker'),
        format: 'D MMM YYYY',
        minDate: new Date(),
        onSelect: function (date) {
            picker2.setMinDate(date);
            //picker2.???? to set the starting month of picker2 calendar
        }
    });
    var picker2 = new Pikaday({
        field: document.getElementById('datepicker2'),
        format: 'D MMM YYYY',
        minDate: new Date(),
        onSelect: function () {
            console.log(this.getMoment().format('Do MMMM YYYY'));
        }
    });
    </script>
</body>
</html>

please check the above example, based on start day selection i want to trigger the end date calendar starting month. please suggest.

JS bin link


Solution

  • As I understand your question, you want to set the selected month in picker to the picker2 object. use the API onOpen.

    Example

    var picker = new Pikaday({
        field: document.getElementById('datepicker'),
        format: 'D MMM YYYY',
        minDate: new Date(),
        onSelect: function(date) {
            //console.log(this.getMoment().format('Do MMMM YYYY'));
            console.log('test ' + date);
            picker2.setMinDate(date);
            //picker2.setStartRange(date)
        }
    });
    
    var picker2 = new Pikaday({
        field: document.getElementById('datepicker2'),
        format: 'D MMM YYYY',
        minDate: new Date(),
        onOpen: function() {
            picker2.gotoDate(picker.getDate())
        },
        onSelect: function() {
            console.log(this.getMoment().format('Do MMMM YYYY'));
        }
    });