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 相关文章推荐
jQuery实现自定义右键菜单的树状菜单效果
Sep 02 Javascript
js操作数据库实现注册和登陆的简单实例
May 26 Javascript
js css实现垂直方向自适应的三角提示菜单
Jun 26 Javascript
Javascript基础学习笔记(菜鸟必看篇)
Jul 22 Javascript
JavaScript实现按键精灵的原理分析
Feb 21 Javascript
JavaScript 数据类型详解
Mar 13 Javascript
BootStrap表单时间选择器详解
May 09 Javascript
Angular中ng-repeat与ul li的多层嵌套重复问题
Jul 24 Javascript
详解Angular6学习笔记之主从组件
Sep 05 Javascript
vue.js 解决v-model让select默认选中不生效的问题
Jul 28 Javascript
vue 自定义的组件绑定点击事件
Apr 21 Vue.js
uniapp开发打包多端应用完整方法指南
Dec 24 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
php 获取可变函数参数的函数
2009/08/26 PHP
Thinkphp和Bootstrap结合打造个性的分页样式(推荐)
2016/08/01 PHP
YII框架批量插入数据的方法
2017/03/18 PHP
js 发个判断字符串是否为符合标准的函数
2009/04/27 Javascript
JavaScript高级程序设计(第3版)学习笔记3 js简单数据类型
2012/10/11 Javascript
JavaScript包装对象使用介绍
2013/08/29 Javascript
简体中文转换繁体中文(实现代码)
2013/12/25 Javascript
8个超实用的jQuery功能代码分享
2015/01/08 Javascript
HTML5之WebSocket入门3 -通信模型socket.io
2015/08/21 Javascript
jQuery添加删除DOM元素方法详解
2016/01/18 Javascript
拥Bootstrap入怀——导航栏篇
2016/05/30 Javascript
文件上传,iframe跨域数据提交的实现
2016/11/18 Javascript
jQuery鼠标悬停内容动画切换效果
2017/04/27 jQuery
Webpack性能优化 DLL 用法详解
2017/08/10 Javascript
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
2020/02/04 jQuery
[01:27:43]VGJ.S vs TNC Supermajor 败者组 BO3 第三场 6.6
2018/06/07 DOTA
Python3安装Scrapy的方法步骤
2017/11/23 Python
ubuntu安装sublime3并配置python3环境的方法
2018/03/15 Python
cmd运行python文件时对结果进行保存的方法
2018/05/16 Python
Python Matplotlib 基于networkx画关系网络图
2019/07/10 Python
python3调用windows dos命令的例子
2019/08/14 Python
python 基于opencv 实现一个鼠标绘图小程序
2020/12/11 Python
加拿大便宜的隐形眼镜商店:Clearly
2016/09/15 全球购物
介绍一下OSI七层模型
2012/07/03 面试题
大学毕业自我评价
2014/02/02 职场文书
《雕塑之美》教学反思
2014/04/24 职场文书
教师党员先进性教育自我剖析材料思想汇报
2014/09/24 职场文书
学校四风问题对照检查材料思想汇报
2014/09/26 职场文书
2015年元旦晚会活动总结(学生会)
2014/11/28 职场文书
2015年度个人业务工作总结
2015/04/27 职场文书
红色影片观后感
2015/06/18 职场文书
预备党员表决心的话
2015/09/22 职场文书
七年级作文之秋游
2019/10/21 职场文书
一文搞懂Java中的注解和反射
2022/06/21 Java/Android
Win11自动黑屏怎么办 Win11自动黑屏设置教程
2022/07/15 数码科技
Python pyecharts案例超市4年数据可视化分析
2022/08/14 Python