获取DatePicker值VueJS的问题

时间:2017-08-08 07:41:03

标签: javascript datetime datepicker vuejs2 vue-component

我正在使用vue-hotel-datepicker组件作为date.Its工作正常,但问题是在日期更改时获得价值我希望js代码中的日期对象,以便我可以做一些工作。任何建议和帮助将不胜感激

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

这是我的代码

VUE

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

1 个答案:

答案 0 :(得分:1)

组件与事件通信。您的datepicker会发出dateChanged事件,因此您需要在标记中调用组件v-on:dateChanged="getDate"。所以......

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