首页 > 其他分享 >Vue el-date-picker 日期组件的使用,需要初始化时间,初始化时间时候,注意 日期月份 补0

Vue el-date-picker 日期组件的使用,需要初始化时间,初始化时间时候,注意 日期月份 补0

时间:2023-06-16 12:56:51浏览次数:55  
标签:picker 初始化 yearn 日期 monthn var async now data

Vue el-date-picker 日期组件的使用 需要初始化时间,初始化时间时候,注意 日期月份 补0
https://www.cnblogs.com/zhoushuang0426/p/10606863.html

一:显示年月

<el-date-picker v-model="selectMonth" type="month" placeholder="选择月"   @change="jobSearch" value-format="yyyy-MM"></el-date-picker>

js代码:

?
12345678910111213141516171819202122232425262728293031323334<script>export default {    data() {         return {            selectMonth:''        }    },    created() {        this.initData({});    },    methods: {        jobSearch() {      this.getJobListByMonth();    },    async initData(data) {      //获取当前时间      var now   = new Date();      var monthn = now.getMonth()+1;      var yearn  = now.getFullYear();      this.selectMonth = yearn+"-"+monthn;       this.selectUser = parseInt(sessionStorage.getItem("userid"));      // this.getWeekJobList({      //   userid: sessionStorage.getItem("userid"),      //   weekid: "1"      // });      this.getJobListByMonth();    },    async getJobListByMonth(data) {     }   }}</script>

二:选择年月日

 

<el-date-picker v-model="selectDay" type="date" placeholder="选择日" @change="dataSearch" value-format="yyyy-MM-dd"></el-date-picker>

js代码:

复制代码
<script>
export default {
    data() {
         return {
            selectDay:''
        }
    },
    created() {
        this.initData({});
    },
    methods: {
        dataSearch() {
      this.getListByDay();
    },
    async initData(data) {
      //获取当前时间
      var now   = new Date();
      var monthn = now.getMonth()+1;
      var yearn  = now.getFullYear();
      var dayn = now.getDate();
      this.selectDay = yearn+"-"+monthn+"-"+dayn;
      this.selectUser = parseInt(sessionStorage.getItem("userid"));
      this.getListByDay();
    },
    async getListByDay(data) {
    }
   }
}
</script>
复制代码

三:显示年月日时分(秒)

<el-date-picker v-model="selectDatetime" type="datetime" placeholder="选择时间" @change="dataSearch" value-format="yyyy-MM-dd HH:mm" format="yyyy-MM-dd HH:mm"></el-date-picker>

js代码:

复制代码
<script>
export default {
    data() {
         return {
            selectDatetime:''
        }
    },
    created() {
        this.initData({});
    },
    methods: {
        dataSearch() {
      this.getListByDataTime();
    },
    async initData(data) {
      //获取当前时间
      var now   = new Date();
      var monthn = now.getMonth()+1;
      var yearn  = now.getFullYear();
      var dayn = now.getDate();
      var h = now.getHours();
      var m =now.getMinutes();
      var s = now.getSeconds();
      this.selectDatetime = yearn+"-"+monthn+"-"+dayn+" "+h+":"+m+":"+s;
      this.selectUser = parseInt(sessionStorage.getItem("userid"));
      this.getListByDataTime();
    },
    async getListByDataTime(data) {
    }
   }
}
</script>
复制代码

 

标签:picker,初始化,yearn,日期,monthn,var,async,now,data
From: https://www.cnblogs.com/sunny3158/p/17485278.html

相关文章

  • js正则格式化日期时间自动补0的两种解法 将2022-3-4这种日期格式转化为2022-03-04
    js正则格式化日期时间自动补0的两种解法将2022-3-4这种日期格式转化为2022-03-04https://www.jb51.net/article/225324.htm+目录背景解法一思路:代码:解法二思路:总结参考背景时间日期格式化的需求很常见,也有很多工具类转换方法,比如需要将2022-3-4这种日期格式转化为2022-......
  • Java 字符串转日期 str 转为 Date 类型 Date date = new SimpleDateFormat("yyyy-MM-
    Java字符串转日期str转为Date类型Datedate=newSimpleDateFormat("yyyy-MM-dd").parse("2022-12-28");https://blog.csdn.net/weixin_35756690/article/details/129059668在Java中,可以使用SimpleDateFormat类将字符串转换为日期。首先,需要创建一个SimpleDateFor......
  • MySQL如何初始化常量Item?
    MySQL中的一切表达式都是继承自Item类,常量也不外乎如此。以Item_float为例子说明MySQL如何初始化常量Item。首先在Parser里面:NUM_literal:NUM{interror;$$=new(YYTHD->mem_root)Item_int($1,......
  • Oracle-日期时间
    sysdate1.获取当前时间:selectsydatefromdual;--2023-06-159:38:16selecttrunc(sysdate+1)fromdual;--明天2023-06-16通过trunc截断时间,只保留日期部分selecttrunc(sysdate-1)fromdual;--昨天selecttrunc(sysdate)+12/24fromdual;--2023-06-1512:00:00,......
  • 《C++》对象的初始化和清理
    不设计构造和析构函数 编译器会提供空语句的构造和析构初始化--构造函数无返回类型函数名与类名相同构造函数可以有参数可以发生重载创建对象的时候构造函数会自动调用且只调用一次classPerson{public: Person() { cout<<"无参构造函数调用"<<endl; }Person(inta......
  • SpringBean初始化顺序
    Springbean是Spring框架在运行时管理的对象。Springbean是任何Spring应用程序的基本构建块。我们编写的大多数应用程序逻辑代码都将放在Springbean中。执行顺序:Constructor>@Autowired>@PostConstruct>InitializingBean>init-method因此不能在构造函数中直接使用@Au......
  • ubuntu2204脚本初始化集群
    @目录脚本实现脚本测试用于一键部署集群(多节点)的环境初始化,如修改主机名,主机映射,节点相互免密,时间同步等,可多节点部署ps:脚本需要下载sshpass,chrony等软件包,确保ubuntu源正常脚本实现#!/bin/bash#定义节点信息NODES=("192.168.200.180controllerroot""192.168.200.182c......
  • RDIFramework.NET V3.3 Web版角色授权管理新增角色对操作权限项、模块起止生效日期的
    在实际应用在我们可能会有这样的需求,某个操作权限项(按钮)或菜单在某个时间范围内可以让指定角色访问。此时通过我们的角色权限扩展设置就可以办到。在我们框架V3.3Web版本全新增加了角色权限扩展设置的功能。主要是针对角色对操作权限项、角色对模块在指定时间范围内有效的设置。功......
  • RDIFramework.NET V3.3 WinForm版角色授权管理新增角色对操作权限项、模块起止生效日
    在实际应用在我们可能会有这样的需求,某个操作权限项(按钮)或菜单在某个时间范围内可以让指定角色访问。此时通过我们的角色权限扩展设置就可以办到。在我们框架V3.3WinForm版全新增加了角色权限扩展设置的功能。主要是针对角色对操作权限项、角色对模块在指定时间范围内有效的设置。......
  • 获取时间段(根据开始时间以及结束时间获取 中间日期)
    constgetRangeDate=function(startDate:Date,endDate:Date){consttargetArr=[]conststart=newDate(startDate)constend=newDate(endDate)conststartDateInfo={year:start.getFullYear(),month:start.getMonth(),......