无法在 pikaday 日历中设置日历开始日期

Question

当我触发开始日期输入框时，我想在日历弹出窗口中显示未来或过去的月份作为结束日期日历中的开始日期。

<!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>

请检查上面的示例，根据开始日期选择我想触发结束日期日历开始月份。请提出建议。

JS bin link

Answer 1

据我了解您的问题，您想将 picker 中选择的月份设置为 picker2 对象。使用 API onOpen。

例子

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

Answer 2

当我在 Vue.Js 项目中使用 Pikaday 包时，我必须将默认日期设置为表单中的日期字段。我尝试了许多不同版本的设置默认日期。但他们没有为我工作。最后我找到了适合我情况的解决方案。解决方案是像 auto-default="autoDefault" 一样设置道具 autoDefault 等同于 true 到 Pikaday 组件，像这样...

<vue-pikaday v-model='date' auto-default="autoDefault" :options="pikadayOptions" />

 data() {
    return {
       autoDefault : true,
       pikadayOptions: {
           format  : 'YYYY/MM/DD',
           minDate : moment().toDate(),
       },
   }
},

无法在 pikaday 日历中设置日历开始日期

unable to set calendar start date in pikaday calendar

javascript

calendar

pikaday