1

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

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

4

2 回答 2

3

据我了解您的问题，您希望将所选月份设置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'));
    }
});
于 2018-01-24T05:53:52.493 回答
0

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

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

 data() {
    return {
       autoDefault : true,
       pikadayOptions: {
           format  : 'YYYY/MM/DD',
           minDate : moment().toDate(),
       },
   }
},
于 2019-12-10T04:30:02.393 回答