javascript - Issue in getting DatePicker value VueJS - Stack Overflow

admin管理员组

文章数量:1384158

I am using vue-hotel-datepickerponent for date.Its working fine , but the issues is getting value when date has been change i want the date object in js code so that i can do some work.Any suggestion and help will be appreciated

Here is my code

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);
    }
    ,
    ponents: {
        'DatePicker': HotelDatePicker,
    },
    methods: {
        getDate(date) {

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


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





}



</script>

I am using vue-hotel-datepickerponent for date.Its working fine , but the issues is getting value when date has been change i want the date object in js code so that i can do some work.Any suggestion and help will be appreciated

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

Here is my code

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);
    }
    ,
    ponents: {
        'DatePicker': HotelDatePicker,
    },
    methods: {
        getDate(date) {

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


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





}



</script>

• javascript
• datetime
• datepicker
• vuejs2
• vue-ponent

Share Improve this question Follow asked Aug 8, 2017 at 7:41 Wasiq MuhammadWasiq Muhammad 3,13833 gold badges1818 silver badges3030 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

If you use vue-hotel-datepicker there is a list of events on docs: https://github./krystalcampioni/vue-hotel-datepicker#events,

You can use: period-selected, as a params you will get: Mouse Event, check-in, check-out. Also, you have check-in-changed and check-out-changed with their arguments respectively.

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

Components municate with events. Your datepicker emits a dateChanged event, so you need v-on:dateChanged="getDate" in the tag where you call your ponent. So...

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

本文标签： javascriptIssue in getting DatePicker value VueJSStack Overflow