javascriptpikaday

Pikaday selecting 2018 even though the yearRange set is [1968, 2005]


How to make 2005 be selected as default year in the select box.

$(function () {
    var field = $('#calendar')[0];
    

    var pika = new Pikaday({
        field: field,
        yearRange: [1968, 2005],
        onSelect: function () {
            console.log('selected');
        },
        onOpen: function () {
            console.log('open');
        },

        onClose: function () {
            console.log('closed');
        }
    });

});
<link href="https://rawgit.com/dbushell/Pikaday/master/css/pikaday.css" rel="stylesheet"/>
<script src="https://rawgit.com/dbushell/Pikaday/master/pikaday.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>2018 year is selcted even though year range is [1968, 2005]</h1>
<input id="calendar" type="text" value=""></input>


Solution

  • Use defaultDate like shown on the snippet. defaultDate will set the calender to given date. setDefaultDate will choose and highlight the given date.

    $(function () {
        var field = $('#calendar')[0];
        var date = new Date(2005,0,1);
    
        var pika = new Pikaday({
            field: field,
            defaultDate:date,
            setDefaultDate: date,
            yearRange: [1968, 2005],
            onSelect: function () {
                console.log('selected');
            },
            onOpen: function () {
                console.log('open');
            },
    
            onClose: function () {
                console.log('closed');
            }
        });
    
    });
    <link href="https://rawgit.com/dbushell/Pikaday/master/css/pikaday.css" rel="stylesheet"/>
    <script src="https://rawgit.com/dbushell/Pikaday/master/pikaday.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <h1>2018 year is selcted even though year range is [1968, 2005]</h1>
    <input id="calendar" type="text" value=""></input>