首页 > 其他分享 >带范围的日期加时间datepicker

带范围的日期加时间datepicker

时间:2023-09-14 10:31:30浏览次数:24  
标签:datepicker 10 end picker start 日期 Date new 范围

<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>

标签:datepicker,10,end,picker,start,日期,Date,new,范围
From: https://blog.51cto.com/u_16150721/7468074

相关文章

  • 根据指定关键字搜索指定时间范围内的 SAP CRM 中间件 BDOC 的 ABAP 小工具分享
    工具源代码如下:REPORTzscan_bdoc_via_keyword.PARAMETERS:startTYPEsmw3_bdoc-snd_dateOBLIGATORYDEFAULTsy-datlo,endTYPEsmw3_bdoc-snd_dateOBLIGATORYDEFAULTsy-datlo,keywordTYPEstringLOWERCASEOBLIGATORYDEFAULT'CR......
  • oracle数据库使用to_timestamp格式化日期数据时,报错: ORA-01821: date format not reco
    今天偶然发现一个问题:我使用的数据库是11.2版本的sql语句:SELECTto_timestamp('2023-09-1315:43:29.943','yyyy-mm-ddhh24:mi:ss.fff')ASmydataFROMdual就会报错,项目出现问题,但很神奇的时使用oracle数据库12版本的就不会报错。 网上查了下,说是毫秒处是6位的,但只显示3位......
  • 小程序获取日期 年月日
    在小程序中,可以使用Date对象来获取当前的年、月和日 constnow=newDate();constyear=now.getFullYear();//获取当前年份constmonth=now.getMonth()+1;//获取当前月份,注意月份是从0开始的,因此需要加1constday=now.getDate();//获取当前日期console.l......
  • 123.jpg 蓝牛相片摄影时间更改助手是一款绿色免费的照片批量修改摄影日期时间,让您的相
     蓝牛相片摄影时间更改助手是一款绿色免费的照片批量修改摄影日期时间,让您的相片一目发然相片摄影时间 软件全自动一键操作,再也不必一个一个手动修改了更新日志:2023年9月12日V2.00 支持自定义图片类型 升级核心代码2023.04.25V1.50优化代码提高速度修复BUG 本地......
  • SQL SERVER----使用日期格式化,及GETDATE()、CONVERT()函数
    SQLSERVER中日期格式化,及GETDATE()、CONVERT()函数使用说明 1.date和datetime类型的区别date是SQLServer2008新引进的数据类型。它表示一个日期,不包含时间部分,可以表示的日期范围从公元元年1月1日到9999年12月31日。只需要3个字节的存储空间。dateTime日期和时间部分......
  • 界面控件DevExtreme DateRangeBox组件发布,支持日期范围选择!
    在最新的v23.1版本中,DevExpress官方已经正式发布了DevExtreme DateRangeBox小部件,支持所有JavaScript框架,包括Angular、React、Vue和jQuery。这个新的控件允许最终用户选择一个日期范围,该组件继承了DateBox组件的特性:屏蔽输入、灵活的弹出窗口和日历自定义、输入标签/样式模式等......
  • datetime:Python日期与时间值管理计算
    前言datetime库也用于时间日期的处理,主要用于完成日期和时间的解析,格式化和算术运算。本篇,将完整的介绍datetime库的应用知识。datetime.date与time库一样,datetime库也有获取当前日期的类,日历日期值用datetime.date表示。比如datetime.date.today()。具体代码如下:importdate......
  • Golang 日期处理丶函数执行耗时丶内置函数
    一.日期处理1functestDate(){2//获取当前时间3now:=time.Now()4fmt.Printf("当前时间:%v,时间的类型:%T\n",now,now)5fmt.Printf("当前时间的年=%v月=%v日=%v时=%v分=%v秒=%v\n",now.Year(),int(now.Month()),now.Day(),now.Hour(......
  • Icoding 链表 删除范围内结点
    题目:已知线性表中的元素(整数)以值递增有序排列,并以单链表作存储结构。试写一高效算法,删除表中所有大于mink且小于maxk的元素(若表中存在这样的元素),分析你的算法的时间复杂度。链表结点定义如下:struct_lnklist{ElemTypedata;struct_lnklist*next;};typedefstruct......
  • excel如何自动获取本周工作日的日期显示作为标题(周一至周五)
    一、背景:每周发周报的标题格式为:本周一到本周五的日期内容,如下:但是每隔一周发送的时候需要改一下周报标题里面的日期,比较麻烦目前的需求是通过函数自动化生成,根据当前的日期去定位出本周一的日期以及本周五的日期,再通过&字符组合在一起。 二、所需函数:today()功能:查看今天的......