javascript - 获取 DatePicker 值 VueJS 的问题

Question

我正在为日期使用 vue-hotel-datepicker 组件。它工作正常，但问题是在日期更改时获取值我想要 js 中的日期对象> 编写代码以便我可以做一些工作。我们将不胜感激任何建议和帮助

https://github.com/krystalcampioni/vue-hotel-datepicker#i18n

这是我的代码

视觉

<DatePicker DatePickerID="DatePickerID3" 
            :disabledDaysOfWeek="['Monday']" 
            :value="date" placeholder="RentalDays" 
            :hoveringTooltip="false"
            :endDate="new Date(2017, 9,  5)" 
             />

JS

<script>
import Datepicker from 'vuejs-datepicker';
import HotelDatePicker from 'vue-hotel-datepicker'

export default {

    data() {
        return {
            // date:  new Date(2016, 9,  16)
            date: '',
            cdate: "",
            RentalDays: "Rent-in ► Rent-out",
            startdate:""

        }


    },
     created () {
        console.log("DATE",this.date);
    }
    ,
    components: {
        'DatePicker': HotelDatePicker,
    },
    methods: {
        getDate(date) {

            console.log("current date", date);
        }


    },
    watch: {
        value: function () {
            console.log("DATE Value");
        }
    }





}



</script>

Answer 1

如果您使用 vue-hotel-datepicker，文档中有一个事件列表:https://github.com/krystalcampioni/vue-hotel-datepicker#events ,

您可以使用:period-selected，作为参数，您将获得:鼠标事件、 checkin 、 checkout 。此外，您的参数分别为 check-in-changed 和 check-out-changed。

<HotelDatePicker
      :showPrice="true"
      priceSymbol="€"
      :periodDates="periodDates"
      @period-selected="getDates"
    />


 methods: {
        getDate(event,checkIn,checkOut) {
            console.log(date)
            console.log(checkIn);
            console.log(checkOut;
        }
    },


"If you select a period you will see arguments as bellow"

// PointerEvent {isTrusted: true, pointerId: 1, width: 1, height: 1, pressure: 0, …}
// Tue Sep 21 2021 00:00:00 GMT+0200 (Central European Summer Time)
// Sat Sep 25 2021 00:00:00 GMT+0200 (Central European Summer Time)