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 相关文章推荐
JS+flash实现chrome和ie浏览器下同时可以复制粘贴
Sep 22 Javascript
jquery如何获取元素的滚动条高度等实现代码
Oct 19 Javascript
不用一句js代码初始化组件
Jan 27 Javascript
javascript事件冒泡简单示例
Jun 20 Javascript
js实现简单的获取验证码按钮效果
Mar 03 Javascript
Angular实现一个简单的多选复选框的弹出框指令实例
Apr 25 Javascript
jQuery菜单实例(全选,反选,取消)
Aug 28 jQuery
微信小程序picker组件关于objectArray数据类型的绑定方法
Mar 13 Javascript
JavaScript工具库之Lodash详解
Jun 15 Javascript
JavaScript Canvas编写炫彩的网页时钟
Oct 16 Javascript
React 实现车牌键盘的示例代码
Dec 20 Javascript
Node.js fs模块原理及常见用途
Oct 22 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实时显示输出
2008/10/02 PHP
php session 检测和注销
2009/03/16 PHP
php中定义网站根目录的常用方法
2010/08/08 PHP
发一个php简单的伪原创程序,配合商城采集用的
2010/10/12 PHP
php中3种方法删除字符串中间的空格
2014/03/10 PHP
兼容ie6浏览器的php下载文件代码分享
2014/07/14 PHP
浅谈PHP表单提交(POST&amp;GET&amp;URL编/解码)
2017/04/03 PHP
var与Javascript变量隐式声明
2009/09/17 Javascript
JS获取dom 对象 ajax操作 读写cookie函数
2009/11/18 Javascript
dreamweaver 8实现Jquery自动提示
2014/12/04 Javascript
jQuery插件Elastislide实现响应式的焦点图无缝滚动切换特效
2015/04/12 Javascript
angularjs 源码解析之scope
2016/08/22 Javascript
JS定时器实现数值从0到10来回变化
2016/12/09 Javascript
基于javascript实现的购物商城商品倒计时实例
2016/12/11 Javascript
扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框
2017/02/21 Javascript
详解angularjs 关于ui-router分层使用
2017/06/12 Javascript
vue select组件的使用与禁用实现代码
2018/04/10 Javascript
vuex的module模块用法示例
2018/11/12 Javascript
小程序显示弹窗时禁止下层的内容滚动实现方法
2019/03/20 Javascript
JavaScript arguments.callee作用及替换方案详解
2020/09/02 Javascript
JavaScript事件概念详解(区分静态注册和动态注册)
2021/02/05 Javascript
Python2中的raw_input() 与 input()
2015/06/12 Python
详解Python实现多进程异步事件驱动引擎
2017/08/25 Python
python Dijkstra算法实现最短路径问题的方法
2019/09/19 Python
Python udp网络程序实现发送、接收数据功能示例
2019/12/09 Python
使用opencv将视频帧转成图片输出
2019/12/10 Python
pytorch之inception_v3的实现案例
2020/01/06 Python
python工具快速为音视频自动生成字幕(使用说明)
2021/01/27 Python
ivx平台开发之不用代码实现一个九宫格抽奖功能
2021/01/27 HTML / CSS
美国嘻哈文化生活方式品牌:GLD
2018/04/15 全球购物
大学生毕业自我鉴定范文
2014/02/03 职场文书
中学生个人自我评价
2014/02/06 职场文书
士力架广告词
2014/03/20 职场文书
中韩经贸翻译专业大学生职业生涯规划范文
2014/09/18 职场文书
2016年大学自主招生自荐信范文
2015/03/24 职场文书
动画《朋友游戏》公开佐藤友生绘制的开播纪念绘
2022/04/06 日漫