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中的数学函数集合
May 08 Javascript
改善你的jQuery的25个步骤 千倍级效率提升
Feb 11 Javascript
网站导致浏览器崩溃的原因总结(多款浏览器) 推荐
Apr 15 Javascript
JS实现支持多选的遍历下拉列表代码
Aug 20 Javascript
深入浅析JS Function()构造函数
Aug 22 Javascript
SVG描边动画
Feb 23 Javascript
JS实现的走迷宫小游戏完整实例
Jul 19 Javascript
JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】
Feb 06 Javascript
vue发送ajax请求详解
Oct 09 Javascript
基于Node.js的大文件分片上传示例
Jun 19 Javascript
react 生命周期实例分析
May 18 Javascript
element多个表单校验的实现
May 27 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
php5编程中的异常处理详细方法介绍
2008/07/29 PHP
Laravel 5框架学习之向视图传送数据(进阶篇)
2015/04/08 PHP
详解PHP中的Traits
2015/07/29 PHP
PHP文件上传问题汇总(文件大小检测、大文件上传处理)
2015/12/24 PHP
微信公众号OAuth2.0网页授权问题浅析
2017/01/21 PHP
php的PDO事务处理机制实例分析
2017/02/16 PHP
PHP排序二叉树基本功能实现方法示例
2018/05/26 PHP
PHP 与 js的通信(via ajax,json)
2010/11/16 Javascript
jquery获取自定义属性(attr和prop)实例介绍
2013/04/21 Javascript
解析JavaScript中delete操作符不能删除的对象
2013/12/03 Javascript
深入理解JSON数据源格式
2014/01/10 Javascript
在firefox和Chrome下关闭浏览器窗口无效的解决方法
2014/01/16 Javascript
一张表格告诉你windows.onload()与$(document).ready()的区别
2014/05/16 Javascript
jquery中push()的用法(数组添加元素)
2014/11/25 Javascript
JS实现超炫网页烟花动画效果的方法
2015/03/02 Javascript
JQuery中attr属性和jQuery.data()学习笔记【必看】
2016/05/18 Javascript
javascript insertAfter()定义与用法示例
2016/07/25 Javascript
详解微信第三方小程序代开发
2017/06/23 Javascript
详解webpack 如何集成第三方js库
2017/06/29 Javascript
node通过express搭建自己的服务器
2017/09/30 Javascript
vue-video-player视频播放器使用配置详解
2020/10/23 Javascript
[01:02:00]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第三场 1月24日
2021/03/11 DOTA
讲解Python中的递归函数
2015/04/27 Python
TensorFlow的权值更新方法
2018/06/14 Python
Python Pandas批量读取csv文件到dataframe的方法
2018/10/08 Python
django页面跳转问题及注意事项
2019/07/18 Python
opencv3/C++实现视频读取、视频写入
2019/12/11 Python
使用PyCharm安装pytest及requests的问题
2020/07/31 Python
python爬虫爬取网页数据并解析数据
2020/09/18 Python
CSS3实现缺角矩形,折角矩形以及缺角边框
2019/12/20 HTML / CSS
HTML5实现获取地理位置信息并定位功能
2015/04/25 HTML / CSS
个人简历自我评价范文
2014/02/04 职场文书
人力资源职位说明书
2014/07/29 职场文书
2014年政风行风工作总结
2014/11/22 职场文书
酒店采购员岗位职责
2015/04/03 职场文书
《勇者辞职不干了》上卷BD发售宣传CM公开
2022/04/08 日漫