首页 > 其他分享 >日期加时间datepicker

日期加时间datepicker

时间:2023-09-14 10:31:39浏览次数:28  
标签:datepicker picker text Date 日期 时间 onClick date new

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

标签:datepicker,picker,text,Date,日期,时间,onClick,date,new
From: https://blog.51cto.com/u_16150727/7468063

相关文章

  • 带范围的日期加时间datepicker
    <template><divclass="block"><spanclass="demonstration">默认</span><el-date-pickerv-model="value1"type="datetimerange"range-separator="至"s......
  • 根据指定关键字搜索指定时间范围内的 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位......
  • 求解递归时间复杂度
    迭代法每一次对过程的重复称为一次迭代,而每一次迭代得到的结果会作为下一次迭代的初始值。重复执行一系列运算步骤,从前面的量依次求出后面的量的过程。例1problem:\(T(n)=2\timesT(\frac{n}{4})+\sqrtn,T(1)=1\)solution:\[T(n)=2\timesT(\frac{n}{4})+\sqrtn\]\[T......
  • 小程序获取日期 年月日
    在小程序中,可以使用Date对象来获取当前的年、月和日 constnow=newDate();constyear=now.getFullYear();//获取当前年份constmonth=now.getMonth()+1;//获取当前月份,注意月份是从0开始的,因此需要加1constday=now.getDate();//获取当前日期console.l......
  • 利用find命令按照创建、修改时间删除文件
    使用touch命令修改文件访问时间和修改时间:touch-t202301011200 Example.txt删除三十天前创建的时间find/path/to/dir-typef-ctime+5-delete 目前还不确定如何修改文件创建时间,但是可以利用上述find语句删除修改时间和访问时间在条件内的文件 ......
  • 18-时间表示-unix时间点-毫秒和微秒-time模块
        ......
  • C#时间转换
    //获取日期+时间DateTime.Now.ToString("yyyyMMddHHmmss");//20080101130101----24小时制 //获取日期DateTime.Now.ToLongDateString().ToString();//2008年9月4日DateTime.Now.ToShortDateString().ToString();//2008-9-4DateTime.Now.ToString("yyyy-MM-dd&quo......
  • buildroot 构建根文件系统(8)添加网络时间同步
    一、开发背景构建最小系统后成功运行后,时间都是从初始化时间开始计算,形如:ThuJan 109:57:55UTC1970二、开发需求开机联网后自动从网络中获取最新的时间,同步到系统中三、开发环境LinuxUbuntu4.15.0-65-generic+buildroot-2023.02.3+i.mx6d(cortex-A9)......
  • Python - unix timestamp 时间戳转换错误
    用python的时间转换函数,结果报错。想着这么基础的怎么会报错呢。fromdatetimeimportdatetime#timestampisnumberofsecondssince1970-01-01timestamp=1545730073#convertthetimestamptoadatetimeobjectinthelocaltimezonedt_object=datetime.from......