Issue in getting DatePicker value VueJS

Question

I am using vue-hotel-datepickercomponent 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.com/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);
    }
    ,
    components: {
        'DatePicker': HotelDatePicker,
    },
    methods: {
        getDate(date) {

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


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





}



</script>

Besartt · Answer 1 · 2021-09-14T07:52:08.867

If you use vue-hotel-datepicker there is a list of events on docs: https://github.com/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)

score 2 · Answer 2 · answered Aug 08 '17 at 07:47

2

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

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

answered Aug 08 '17 at 07:47

bbsimonbb

27,056
15
80
110

Thanks , yes i have bind with wrong shorthand , after that remove it. it works it return it in this format current date 2017-08-18 ► 2017-08-26. how i make in proper format – Wasiq Muhammad Aug 08 '17 at 07:51
Ah that's a whole different story ! Javascript date formatting [is a specialist topic](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date) ! – bbsimonbb Aug 08 '17 at 07:52
yes working its syntax mistake from myside, would have there any filter to make it in proper format – Wasiq Muhammad Aug 08 '17 at 07:55
You can pass a format property to your component, but the default format is quite a good one. It's unambiguous and can easily be converted into a Date object. The challenge, dealing with dates, is to [keep out all notion of time and timezone](https://stackoverflow.com/a/38050824/1585345). – bbsimonbb Aug 08 '17 at 08:12
one more thing i want to change `check in and check out` string, in docs it mentioned just add placeholder string. but it didnt work for me. – Wasiq Muhammad Aug 08 '17 at 08:27
In your code, why is placeholder a variable name? Placeholder should be text to display to the user, with proper spaces. – bbsimonbb Aug 08 '17 at 08:35
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/151352/discussion-between-wasiq-muhammad-and-user1585345). – Wasiq Muhammad Aug 08 '17 at 09:13

Issue in getting DatePicker value VueJS

2 Answers2