Question

如何在Vuejs中使用materializecss Timepicker获取时间值

Meterilize css Time Picker Jsfiddle LInk

它给了我jsfiddle的价值，但是当我这样做时，我的vuejs预测它不起作用..

Vue.js代码：

  <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：我的小提琴工作正常，如果你检查控制台，它给我价值，但相同的代码不适用于Vue.js项目我的问题在Vuejs ..我想得到像jsfiddle的价值

Answer 1

Jsfiddle Link With Solution own my problem

我使用input

获得了解决方案

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

Answer 2

我认为你不应该使用jQuery。 Vue提供了一些更好的绑定方式。

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

在此代码中，我将myTimeValue（本地数据变量）绑定到timepicker的实际值。现在我可以在任何地方使用它，并与所有更新的东西进行交易。

Answer 3

我认为你应该使用ref

如果您需要在JavaScript中直接访问子组件，则必须使用ref为子组件分配引用ID。有关更多信息，请查看Link。

使用方法：

您的html应与此类似：

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

您还需要使用jquery对其进行初始化（与您完成的方式相同）

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

例如，当您的用户提交表单时，您只需使用：this.$refs.startDate.value 这将获取日期的值。

如果您想要对用户进行绑定更改，可以使用v-model。否则，我认为使用v-model是不必要的。

Vue Docs：

您可以使用v-model指令创建双向数据绑定表单输入和textarea元素。它会自动选择正确的基于输入类型
更新元素的方法

有关详情，请访问：Link

Answer 4

请使用

v-model.lazy =“ deliverySchedule”

为我工作！！！

vuejs materializecss timepicker没有得到价值

4 个答案: