ant-design-vue 时间选择器赋值默认时间的操作


Posted in Javascript onOctober 27, 2020

我就废话不多说了,大家还是直接看代码吧~

<template>
 <div>
 <a-range-picker
   show-time
   format="YYYY/MM/DD HH:mm:ss"
   :value="[this.moment(startTime, dateFormat),this.moment(endTime, dateFormat)]" //关键代码
   @change="onChangeTime"
   ></a-range-picker>
  </div>
</template>
<script>
import Moment from 'moment'
export default {
 data () {
  this.dateFormat = 'YYYY/MM/DD HH:mm:ss'
  return {
   startTime: '2019-07-12 16:00:00',
   endTime: '2019-07-13 04:00:00',
  }
 }
 methods: {
  onChangeTime (dates, dateStrings) {
  console.log(dates)
  console.log('From: ', dateStrings[0], ', to: ', dateStrings[1])
 },
 }
}
</script>

效果图:

ant-design-vue 时间选择器赋值默认时间的操作

补充知识:ant-design-vue TimePicker 时间选择框 踩坑

笔者在一次开发中用到TimePicker 时间选择框组件。

要求是有默认值,就是从接口中返回的数据,但是TimePicker数据在一次加载后便不会更新

简单的说,如果在data里设置了default=null TimePicker就会就会显示Invalid date,default=“9:00:00”,就会显示9:00:00

最后解决方法是data里设置了default=null,在time-picker内做判断 v-if="defaultstart!==null"

完美解决!

以上这篇ant-design-vue 时间选择器赋值默认时间的操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 更新 JavaScript 数组的 uniq 方法
Jan 23 Javascript
Js基础学习资料
Nov 23 Javascript
javascript 文本框水印/占位符(watermark/placeholder)实现方法
Jan 15 Javascript
深入理解jQuery事件绑定
Jun 02 Javascript
js 点击a标签 获取a的自定义属性方法
Nov 21 Javascript
jQuery实现发送验证码并60秒倒计时功能
Nov 25 Javascript
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
Mar 09 Javascript
Node.js爬取豆瓣数据实例分析
Mar 05 Javascript
JS数组进阶示例【数组的几种函数用法】
Jan 16 Javascript
jQuery实现简单日历效果
Jul 05 jQuery
vue实现从外部修改组件内部的变量的值
Jul 30 Javascript
JavaScript 实现轮播图特效的示例
Nov 05 Javascript
ant design vue中日期选择框混合时间选择器的用法说明
Oct 27 #Javascript
vue-cli3配置favicon.ico和title的流程
Oct 27 #Javascript
Electron+vue从零开始打造一个本地播放器的方法示例
Oct 27 #Javascript
解决vue数据不实时更新的问题(数据更改了,但数据不实时更新)
Oct 27 #Javascript
js实现自定义滚动条的示例
Oct 27 #Javascript
vue移动端下拉刷新和上滑加载
Oct 27 #Javascript
Element-UI 使用el-row 分栏布局的教程
Oct 26 #Javascript
You might like
php include类文件超时问题处理
2015/02/06 PHP
PHP获取访问页面HTTP状态码的实现代码
2016/11/03 PHP
TP5框架页面跳转样式操作示例
2020/04/05 PHP
PHP的imageTtfText()函数深入详解
2021/03/03 PHP
jscript之Read an Excel Spreadsheet
2007/06/13 Javascript
用js实现上传图片前的预览(TX的面试题)
2007/08/14 Javascript
用javascript做拖动布局的思路
2008/05/31 Javascript
jquery 插件之仿“卓越亚马逊”首页弹出菜单效果
2008/12/25 Javascript
zTree插件之单选下拉菜单实例代码
2013/11/07 Javascript
JS事件在IE与FF中的区别详细解析
2013/11/20 Javascript
js为空或不是对象问题的快速解决方法
2013/12/11 Javascript
JavaScript通过Date-Mask将日期转换成字符串的方法
2015/06/04 Javascript
jquery合并表格中相同文本的相邻单元格
2015/07/17 Javascript
基于jQuery Circlr插件实现产品图片360度旋转
2015/09/20 Javascript
最原始的jQuery注册验证方式
2016/10/11 Javascript
AngularJs验证重复密码的方法(两种)
2016/11/25 Javascript
bootstrapValidator自定验证方法写法
2016/12/01 Javascript
微信小程序中插入激励视频广告并获取收益(实例代码)
2019/12/06 Javascript
使用python实现baidu hi自动登录的代码
2013/02/10 Python
python抓取豆瓣图片并自动保存示例学习
2014/01/10 Python
Python中用于返回绝对值的abs()方法
2015/05/14 Python
利用Python命令行传递实例化对象的方法
2016/11/02 Python
对Python Pexpect 模块的使用说明详解
2019/02/14 Python
python实现在函数中修改变量值的方法
2019/07/16 Python
python实现飞行棋游戏
2020/02/05 Python
django中的数据库迁移的实现
2020/03/16 Python
浅谈HTML5 defer和async的区别
2016/06/07 HTML / CSS
外贸公司实习自我鉴定
2013/09/24 职场文书
高三英语教学反思
2014/01/13 职场文书
优秀老员工获奖感言
2014/02/15 职场文书
2016年第32个教师节红领巾广播稿
2015/12/18 职场文书
公司会议开幕词
2016/03/03 职场文书
幼儿园大班教师评语
2019/06/21 职场文书
使用CSS3实现按钮悬停闪烁动态特效代码
2021/08/30 HTML / CSS
php将xml转化对象的实例详解
2021/11/17 PHP
Vue Element plus使用方法梳理
2022/12/24 Vue.js