Question

我使用名为datepicker的自定义JS库，您可以找到here。

我已经设置并正常工作，但我需要一些额外的功能，而且我完全不知道如何完成它。

这是我到目前为止所拥有的：

<h:panelGroup>
    <h:panelGrid>
        <input id="depatureDate" value="Departure date" class="datepicker dp1"></input>
        <script>
            $(".datepicker, dp1").pickadate({
                format: "dd/mm/yyyy",
                formatSubmit: "dd/mm/yyyy"
            })
        </script>
    </h:panelGrid>
    <h:panelGrid id="returnDate">
        <input value="Return date" class="datepicker dp2"></input>
        <script>
            $(".datepicker, dp2").pickadate({
                format: "dd/mm/yyyy",
                formatSubmit: "dd/mm/yyyy"
            })
        </script>
    </h:panelGrid>
</h:panelGroup>

我需要做的是：

如果点击了第一个日期选择器的输入并选择了一个日期，那么该日期选择器需要关闭（它已经这样做了，所以很好）并且第二个日期选择器需要打开，标记在其上的第一个中选择的日期。然后，用户必须在第二个日期选择器上选择另一个日期

如果有人知道如何做到这一点，建议和指示将非常受欢迎！

Answer 1

datepicker提供了一个close事件，也许你可以使用它？在这里查看API http://amsul.ca/pickadate.js/api.htm#method-on 进一步向下，你找到

$('.datepicker').pickadate({
onOpen: function() {
    console.log('Opened up!')
},
onClose: function() {
    console.log('Closed now')
},
onRender: function() {
    console.log('Just rendered anew')
},
onStart: function() {
    console.log('Hello there :)')
},
onStop: function() {
    console.log('See ya')
},
onSet: function(event) {
    console.log('Set stuff:', event)
}
})

输入关闭事件时，打开一个新的日期选择器并设置当前关闭的默认值。

Answer 2

好的，我在这里做了一个小例子，处理了close事件。

<input type="text" class="datepicker1" />
<br />
<input type="text" class="datepicker2" />
<script type="text/javascript">
    // init second picker
    var $input = $('.datepicker2').pickadate();    
    // init first picker
    $('.datepicker1').pickadate({
        // handle close event
        onClose: function() {
            var picker = $input.pickadate('picker');
            // set unix timestamp to the second picker
            // maybe theres a better solution for this...currenlty it works
            picker.set('select', this.component.item.select.pick );
            picker.open();
        }
    });

</script>

别忘了加载所有pickadate库和jquery ..... 我已经定义了2个带有classdatepicker1和datepicker2的div。然后我正在创造 datepicker对象。 datepicker1对象处理onClose事件。当第一个datepicker关闭时，脚本会打开第二个并设置datepicker1 ...

的值

希望这会有所帮助

欢呼声

关闭旧日期选择器时打开新的日期选择器

2 个答案: