Element DateTimePicker日期时间选择器的使用示例


Posted in Javascript onJuly 27, 2020

组件—日期时间选择器

日期和时间点

Element DateTimePicker日期时间选择器的使用示例

<template>
 <div class="block">
  <span class="demonstration">默认</span>
  <el-date-picker
   v-model="value1"
   type="datetime"
   placeholder="选择日期时间">
  </el-date-picker>
 </div>
 <div class="block">
  <span class="demonstration">带快捷选项</span>
  <el-date-picker
   v-model="value2"
   type="datetime"
   placeholder="选择日期时间"
   align="right"
   :picker-options="pickerOptions">
  </el-date-picker>
 </div>
 <div class="block">
  <span class="demonstration">设置默认时间</span>
  <el-date-picker
   v-model="value3"
   type="datetime"
   placeholder="选择日期时间"
   default-time="12:00:00">
  </el-date-picker>
 </div>
</template>

<script>
 export default {
  data() {
   return {
    pickerOptions: {
     shortcuts: [{
      text: '今天',
      onClick(picker) {
       picker.$emit('pick', new Date());
      }
     }, {
      text: '昨天',
      onClick(picker) {
       const date = new Date();
       date.setTime(date.getTime() - 3600 * 1000 * 24);
       picker.$emit('pick', date);
      }
     }, {
      text: '一周前',
      onClick(picker) {
       const date = new Date();
       date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
       picker.$emit('pick', date);
      }
     }]
    },
    value1: '',
    value2: '',
    value3: ''
   };
  }
 };
</script>

日期和时间范围

Element DateTimePicker日期时间选择器的使用示例

<template>
 <div class="block">
  <span class="demonstration">默认</span>
  <el-date-picker
   v-model="value1"
   type="datetimerange"
   range-separator="至"
   start-placeholder="开始日期"
   end-placeholder="结束日期">
  </el-date-picker>
 </div>
 <div class="block">
  <span class="demonstration">带快捷选项</span>
  <el-date-picker
   v-model="value2"
   type="datetimerange"
   :picker-options="pickerOptions"
   range-separator="至"
   start-placeholder="开始日期"
   end-placeholder="结束日期"
   align="right">
  </el-date-picker>
 </div>
</template>

<script>
 export default {
  data() {
   return {
    pickerOptions: {
     shortcuts: [{
      text: '最近一周',
      onClick(picker) {
       const end = new Date();
       const start = new Date();
       start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
       picker.$emit('pick', [start, end]);
      }
     }, {
      text: '最近一个月',
      onClick(picker) {
       const end = new Date();
       const start = new Date();
       start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
       picker.$emit('pick', [start, end]);
      }
     }, {
      text: '最近三个月',
      onClick(picker) {
       const end = new Date();
       const start = new Date();
       start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
       picker.$emit('pick', [start, end]);
      }
     }]
    },
    value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
    value2: ''
   };
  }
 };
</script>

默认的起始与结束时刻

Element DateTimePicker日期时间选择器的使用示例

<template>
 <div class="block">
  <span class="demonstration">起始日期时刻为 12:00:00</span>
  <el-date-picker
   v-model="value1"
   type="datetimerange"
   start-placeholder="开始日期"
   end-placeholder="结束日期"
   :default-time="['12:00:00']">
  </el-date-picker>
 </div>
 <div class="block">
  <span class="demonstration">起始日期时刻为 12:00:00,结束日期时刻为 08:00:00</span>
  <el-date-picker
   v-model="value2"
   type="datetimerange"
   align="right"
   start-placeholder="开始日期"
   end-placeholder="结束日期"
   :default-time="['12:00:00', '08:00:00']">
  </el-date-picker>
 </div>
</template>

<script>
 export default {
  data() {
   return {
    value1: '',
    value2: ''
   };
  }
 };
</script>

Attributes

Element DateTimePicker日期时间选择器的使用示例

Element DateTimePicker日期时间选择器的使用示例

Element DateTimePicker日期时间选择器的使用示例

Picker Options

Element DateTimePicker日期时间选择器的使用示例

Shortcuts

Element DateTimePicker日期时间选择器的使用示例

Events

Element DateTimePicker日期时间选择器的使用示例

Methods

Element DateTimePicker日期时间选择器的使用示例

Slots

Element DateTimePicker日期时间选择器的使用示例

使用element UI的日期选择器时,默认显示当天日期

需求:输入框中要把当天日期显示在输入框中,并且传给后台的日期格式是2019-06-12。(如交易数据)

Element DateTimePicker日期时间选择器的使用示例

传给后台的时间格式为'2019-06-12'这样的格式,,这个很好实现,el-date-picker上添加value-format="yyyy-MM-dd"即可;
本来以为element UI中default-value设置之后,可以直接在输入框中显示,测试之后无用。最后通过下面的方法实现效果

<el-form-item label="交易数据">
      <el-date-picker
       type="date"
       placeholder="选择日期"
       v-model="searchFormField.date"
       style="width: 100%;"
       value-format="yyyy-MM-dd"
      ></el-date-picker>
</el-form-item>
    
   
 methods: {
  getNowTime() {
    var now = new Date();
    var year = now.getFullYear(); //得到年份
    var month = now.getMonth(); //得到月份
    var date = now.getDate(); //得到日期
    month = month + 1;
    month = month.toString().padStart(2, "0");
    date = date.toString().padStart(2, "0");
    var defaultDate = `${year}-${month}-${date}`;
    this.$set(this.searchFormField, "date", defaultDate);
  },
 }

到此这篇关于Element DateTimePicker日期时间选择器的使用示例的文章就介绍到这了,更多相关Element DateTimePicker日期时间选择器内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript preload&amp;lazy load
May 13 Javascript
用apply让javascript函数仅执行一次的代码
Jun 27 Javascript
Prototype源码浅析 Enumerable部分之each方法
Jan 16 Javascript
JavaScript前端图片加载管理器imagepool使用详解
Dec 29 Javascript
jquery结婚电子请柬特效源码分享
Aug 21 Javascript
Javascript oop设计模式 面向对象编程简单实例介绍
Dec 13 Javascript
深入理解vue路由的使用
Mar 24 Javascript
JavaScript数据结构之二叉树的遍历算法示例
Apr 13 Javascript
vue综合组件间的通信详解
Nov 06 Javascript
详解微信小程序的 request 封装示例
Aug 21 Javascript
在JavaScript中实现链式调用的实现
Dec 24 Javascript
交互式可视化js库gojs使用介绍及技巧
Feb 18 Javascript
Js图片点击切换轮播实现代码
Jul 27 #Javascript
在vue中实现echarts随窗体变化
Jul 27 #Javascript
Vue组件跨层级获取组件操作
Jul 27 #Javascript
vue 解决兄弟组件、跨组件深层次的通信操作
Jul 27 #Javascript
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
Jul 27 #Javascript
JS的时间格式化和时间戳转换函数示例详解
Jul 27 #Javascript
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
Jul 27 #Javascript
You might like
什么是短波收听SWL
2021/03/01 无线电
如何在PHP中进行身份认证
2006/10/09 PHP
php图像处理类实例
2015/07/28 PHP
php变量与JS变量实现不通过跳转直接交互的方法
2017/08/25 PHP
thinkphp3.2框架中where条件查询用法总结
2019/08/13 PHP
laravel实现图片上传预览,及编辑时可更换图片,并实时变化的例子
2019/11/14 PHP
jQuery 中关于CSS操作部分使用说明
2007/06/10 Javascript
js下用eval生成JSON对象
2010/09/17 Javascript
js取float型小数点后两位数的方法
2014/01/18 Javascript
director.js实现前端路由使用实例
2015/02/03 Javascript
基于Jquery实现表单验证
2020/07/20 Javascript
AngularJS 与百度地图的结合实例
2016/10/20 Javascript
jQuery 出现Cannot read property ‘msie’ of undefined错误的解决方法
2016/11/23 Javascript
jQuery dateRangePicker插件使用方法详解
2017/07/28 jQuery
Vue 组件封装 并使用 NPM 发布的教程
2018/09/30 Javascript
用vue 实现手机触屏滑动功能
2020/05/28 Javascript
[03:01]完美盛典趣味短片 DOTA2年度最佳&拉胯英雄
2019/12/07 DOTA
[06:48]DOTA2-DPC中国联赛2月26日Recap集锦
2021/03/11 DOTA
用Python实现一个简单的多线程TCP服务器的教程
2015/05/05 Python
Python网络爬虫与信息提取(实例讲解)
2017/08/29 Python
go和python变量赋值遇到的一个问题
2017/08/31 Python
python爬虫简单的添加代理进行访问的实现代码
2019/04/04 Python
Django {{ MEDIA_URL }}无法显示图片的解决方式
2020/04/07 Python
html5在移动端的屏幕适应问题示例探讨
2014/06/15 HTML / CSS
台湾前三大B2C购物网站:MOMO购物网
2017/04/27 全球购物
香港彩色隐形眼镜在线商店:Stunninglens(全球免费送货)
2019/05/10 全球购物
生产车间实习自我鉴定
2013/09/23 职场文书
师范生自荐信
2013/10/27 职场文书
大学毕业生求职自荐信
2014/02/20 职场文书
校庆活动方案
2014/03/31 职场文书
缓刑期间思想汇报范文
2014/10/10 职场文书
教师作风建设剖析材料
2014/10/11 职场文书
电影雷锋观后感
2015/06/10 职场文书
Python标准库之typing的用法(类型标注)
2021/06/02 Python
CSS Transition通过改变Height实现展开收起元素
2021/08/07 HTML / CSS
Python数据结构之队列详解
2022/03/21 Python