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 相关文章推荐
EditPlus注册码生成器(js代码实现)
Mar 25 Javascript
利用CSS、JavaScript及Ajax实现高效的图片预加载
Oct 16 Javascript
浅析JavaScript中的同名标识符优先级
Dec 06 Javascript
JavaScript日期类型的一些用法介绍
Mar 02 Javascript
在JavaScript中用getMinutes()方法返回指定的分时刻
Jun 10 Javascript
JQ技术实现注册页面带有校验密码强度
Jul 27 Javascript
js实现跨域的几种方法汇总(图片ping、JSONP和CORS)
Oct 25 Javascript
JS实现的简易拖放效果示例
Dec 29 Javascript
Bootstarp基本模版学习教程
Feb 01 Javascript
详解为element-ui的Select和Cascader添加弹层底部操作按钮
Feb 07 Javascript
JavaScript canvas实现雪花随机动态飘落
Feb 08 Javascript
Vue提供的三种调试方式你知道吗
Jan 18 Vue.js
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
PHP输出控制功能在简繁体转换中的应用
2006/10/09 PHP
PHP面向对象的进阶学习(抽像类、接口、final、类常量)
2012/05/07 PHP
php根据日期判断星座的函数分享
2014/02/13 PHP
PHP集成百度Ueditor 1.4.3
2014/11/23 PHP
Javascript常用运算符(Operators)-javascript基础教程
2007/12/14 Javascript
JavaScript 对象、函数和继承
2009/07/07 Javascript
javascript json 新手入门文档
2009/12/03 Javascript
JS getStyle获取最终样式函数代码
2010/04/01 Javascript
js 字符串转换成数字的三种方法
2013/03/23 Javascript
理解Javascript的动态语言特性
2015/06/17 Javascript
jQuery实现页面下拉100像素出现悬浮窗口的方法
2016/09/05 Javascript
js字符串操作总结(必看篇)
2016/11/22 Javascript
Angular2搜索和重置按钮过场动画
2017/05/24 Javascript
基于构造函数的五种继承方法小结
2017/07/27 Javascript
Vue的事件响应式进度条组件实例详解
2018/02/04 Javascript
基于axios 解决跨域cookie丢失的问题
2018/09/26 Javascript
bootstrap-closable-tab可实现关闭的tab标签页插件
2020/08/09 Javascript
[03:24]DOTA2超级联赛专访hao 大翻盘就是逆袭
2013/05/24 DOTA
[02:28]PWL开团时刻DAY3——Ink Ice与DeMonsTer之间的勾心斗角
2020/11/03 DOTA
将Django使用的数据库从MySQL迁移到PostgreSQL的教程
2015/04/11 Python
在python中画正态分布图像的实例
2019/07/08 Python
python与C、C++混编的四种方式(小结)
2019/07/15 Python
python logging模块书写日志以及日志分割详解
2019/07/22 Python
基于Python2、Python3中reload()的不同用法介绍
2019/08/12 Python
Jupyter Notebook 文件默认目录的查看以及更改步骤
2020/04/14 Python
Django中FilePathField字段的用法
2020/05/21 Python
Django QuerySet查询集原理及代码实例
2020/06/13 Python
Python实现弹球小游戏
2020/08/01 Python
python+appium+yaml移动端自动化测试框架实现详解
2020/11/24 Python
浅析Python模块之间的相互引用问题
2021/02/26 Python
美国高品质个性化珠宝销售网站:Jewlr
2018/05/03 全球购物
StubHub希腊:购买体育赛事、音乐会和剧院门票
2019/08/03 全球购物
毕业生的自我鉴定
2013/10/29 职场文书
业务员薪酬管理制度
2014/01/15 职场文书
六一节目主持词
2014/04/01 职场文书
德生BCL3000抢先使用感受和评价
2022/04/07 无线电