vuejs materializecss timepicker没有得到价值

Posted 2023-02-22

【中文标题】vuejs materializecss timepicker没有得到价值

【英文标题】：vuejs materializecss timepicker not get value

【发布时间】：2018-03-07 10:04:42

【问题描述】：

如何在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);
        );

    ,

注意：我的小提琴工作正常，如果您检查控制台，它会给我带来价值，但相同的代码在 Vue.js 中不起作用 在 Vuejs 中项目我的问题.. 我想像 jsfiddle 一样获得价值

【问题讨论】：

你的小提琴很好用。究竟什么不起作用？

是的，我的小提琴工作正常，如果您检查控制台，它会给我带来价值，但相同的代码在 Vue.js 中无法工作，在 Vuejs 中投影我的问题.. 我想获得价值像jsfiddle

请添加你的 vuejs 代码

@AmrAly 我在我的问题中给出了它

@AmrAly 谢谢我通过为您制作 jsfiddle Snipper 或实时链接获得了解决方案。

【参考方案1】：

我认为你不应该为此使用 jQuery。 Vue 提供了一些很好的绑定，效果更好。

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

在此代码中，我将 myTimeValue（本地数据变量）绑定到时间选择器的实际值。现在我可以在任何地方使用它，并且 vue 处理所有更新的东西。

【参考方案2】：

Jsfiddle Link With Solution own my problem

我通过使用input得到了解决方案

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

【参考方案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 文档：

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

更多信息请访问：Link

【参考方案4】：

请使用

v-model.lazy="deliverySchedule"

为我工作！！！

【讨论】：

更多信息在这里 -> vuejs.org/v2/guide/forms.html#lazy 显然事件更改在通过pickatime.js而不是输入更新后被触发。