CODEWITHSUNDEEP
javascriptjqueryvue.jsvuejs2materialize
MD Ashik
MD Ashik

Reputation: 9835

vuejs materializecss timepicker not get value

How can I get time value using materializecss Timepicker in Vuejs

Meterilize css Time Picker Jsfiddle LInk

It's give me value in jsfiddle but when I doing it my vuejs project it's not working..

Vue.js Code: 

  <v-text-field
    name="start-time"
    id="edit_start-time"
    class="timepicker"
   ></v-text-field>



mounted() {
       $('.timepicker').pickatime({
        default: 'now', // Set default time: 'now', '1:30AM', '16:30'
        fromnow: 0, // set default time to *
        twelvehour: true, // Use AM/PM or 24-hour format
        donetext: 'OK', // text for done-button
        cleartext: 'Clear', // text for clear-button
        canceltext: 'Cancel', // Text for cancel-button
        autoclose: false, // automatic close timepicker
        ampmclickable: true, // make AM PM clickable
        aftershow: function() {} //Function for after opening timepicker
        });
      $('.timepicker').on('change', function() {
         let receivedVal = $(this).val();
          console.log(receivedVal);
        });

    },

NB: My fiddle works fine and if you check console it give me value but same code not work in Vue.js Project my Problem in Vuejs.. i want to get value like jsfiddle

Upvotes: 2

Views: 1745

Answers (4)

Adi Azarya
Adi Azarya

Reputation: 4473

I think you should use ref

If you need directly access a child component in JavaScript you have to assign a reference ID to the child component using ref. For more information take a look at Link.

How to use:

Your html should be similar to this:

<div class="input-field inline">
    <label for="startDate" class="materialize-label">Start Date</label>
    <input id="startDate" ref="startDate" type="date" size="12" class="startDate timepicker">
</div>

You also need to initialize it with jquery (the same way you have done it)

$('.timepicker').pickatime({
    ...
    ...
    ...
})

For example, when your user submits a form you just need to use: this.$refs.startDate.value This will grab the value of the date.

If you want to bind changes from the user you can use v-model. Otherwise, I think using v-model is unnecessary.

Vue Docs:

You can use the v-model directive to create two-way data bindings on form input and textarea elements. It automatically picks the correct way to update the element based on the input type

More information at: Link

Upvotes: 0

Rahul
Rahul

Reputation: 710

Please use

v-model.lazy="deliverySchedule"

worked for me !!!

Upvotes: 4

MD Ashik
MD Ashik

Reputation: 9835

Jsfiddle Link With Solution own my problem

I got solution by use input

<input class="timepicker" v-model="deliverySchedule" >

Upvotes: 1

Thomas
Thomas

Reputation: 2536

I think you should not use jQuery for this. Vue offers some nice bindings wich are working way better.

<v-time-picker v-model="myTimeValue"></v-time-picker>

In this code i bind myTimeValue (a local data variable) to the actual value of the timepicker. Now i can use it anywhere and vue deals with all updating stuff.

Upvotes: 0

Related Questions