vue中使用时间插件、vue使用laydate

雨点打透心脏的1/2处 2021-11-01 08:50 731阅读 0赞

<input id="time1"  readonly="readonly"  placeholder="这里选择时间" v-model='input3' />
            ——
            <input id="time2" readonly="readonly" placeholder="这里选择时间" v-model='input4'/>

在vue数据data中定义两个对应的数据

input3: '',
            input4: '',

在vue初始化时处理laydata绑定事件  ，这里使用的延迟加载，为了避免顺序问题导致无法使用

在时间选择结束时将值赋给vue的数据，不然vue的数据并没有随着时间改变而改变

//用于数据初始化
          created:function(){                  
              setTimeout( function(){
                    laydate.render({
                          elem: "#time1", //指定元素
                          type: 'datetime',
                          format:'yyyy-MM-dd HH:mm:ss',
                          trigger: 'click',
                          done:function(value, date, endDate){
                              vue.input3=value;
                              }
                        });
                    laydate.render({
                          elem: "#time2", //指定元素
                          type: 'datetime',
                          format:'yyyy-MM-dd HH:mm:ss',
                          trigger: 'click',
                          done:function(value, date, endDate){
                              vue.input4=value;
                              }
                        });
                  }, 5* 100 );
          },

需要引入vue.js和laydate.js

转载于:https://www.cnblogs.com/qq376324789/p/11224717.html

发表评论取消回复

表情：

评论列表（有 0 条评论，731人围观）

还没有评论，来说两句吧...

相关阅读

相关 layDate日期插件的使用

于公司使用的是vue+bootstrap，所以在这里记录的是 *laydate 的*独立版本. **[官方插件下载以及实例][Link 1]** **[官方文档参考]...

川长思鸟来/ 2024年04月18日 16:41/ 0 赞/ 157 阅读

相关 vue使用jsonp插件

1.安装 npm install jsonp --save-dev 2.引入jsonp import jsonp from 'jsonp'; 3.请求数

「爱情、让人受尽委屈。」/ 2023年07月04日 11:16/ 0 赞/ 54 阅读

相关 Vue中qs插件的使用

简单来说，qs 是一个增加了一些安全性的查询字符串解析和序列化字符串的库项目中使用命令行工具输入：npm install qs 安装完成后在需要用到的组件中：impo

末蓝、/ 2022年09月02日 12:00/ 0 赞/ 384 阅读

相关 LayDate 时间选择插件的使用介绍

使用实例： \[html\] view plain copy print ? [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][

我会带着你远行/ 2022年06月16日 09:46/ 0 赞/ 1082 阅读

相关 Vue之vue-resource插件使用

vue-resource 是实现Vue异步加载的库 vue-resource特点 1. 体积小 vue-resource非常小巧，在压缩以后只有大约12KB

Myth丶恋晨/ 2022年04月18日 05:45/ 0 赞/ 345 阅读

相关 VSCode中Vue插件使用整理

一、Vue 2 Snippets for Visual Studio Code This extension adds Vue 2 Code Snippets into Vi

Bertha 。/ 2022年04月16日 00:43/ 0 赞/ 518 阅读

相关 vue 引用时间插件laydate

步骤一：下载laydate插件，放到项目里，我的项目结构如下图 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_

淩亂°似流年/ 2022年03月29日 01:58/ 0 赞/ 462 阅读

相关 vue 插件(swiper)使用

两种方法: 1... 打开[https://www.swiper.com.cn/download/index.html][https_www.swiper.com.cn_d

本是古典何须时尚/ 2021年11月22日 14:52/ 0 赞/ 477 阅读

相关 vue中使用时间插件、vue使用laydate

<input id="time1" readonly="readonly" placeholder="这里选择时间" v-model='input3' />

雨点打透心脏的1/2处/ 2021年11月01日 08:50/ 0 赞/ 732 阅读

相关 vue使用Moment插件格式化时间

使用npm命令安装moment npm install moment --save 在main.js文件里引用moment // The Vue

﹏ヽ暗。殇╰゛Y/ 2021年09月18日 23:44/ 0 赞/ 727 阅读