记录--使用el-time-picker默认值遇到的问题

目录
  • 使用el-time-picker默认值问题
  • el-time-picker 默认时间展示

使用el-time-picker默认值问题

首先文档有指出不同组件的默认值default-value类型区别；

el-time-picker默认值的类型为new Date()，而el-time-select的默认值类型为string

所以首先要知道是用的哪种组件再设置；

再一个是new Date()需要设置的是完整的日期时间，如果你要使用el-time-picker设置默认值需要这样new Date(0, 0, 0, 0, 0, 0)显示时间就会是00:00:00；前三位是年月日后三位时分秒，因为我们是用的是时间插件所以改动后三位即可；使用el-time-select则设置字符串00:00即可；

value-format可以设置el-time-picker绑定值显示格式，具体可以查看文档，我这里设置的是value-format="HH:mm:ss"

示例代码：

//el-time-picker
<el-time-picker
	placeholder="时间"
	v-model="time"
	value-format="HH-mm-ss"
	:default-value="new Date(0, 0, 0, 1, 0, 0)"
></el-time-picker>

el-time-picker 默认时间展示

<el-form-item label="时间段" prop="meal_time">
  <el-time-picker
    v-model="meal_temp.meal_time"
    is-range
    range-separator="至"
    start-placeholder="开始时间"
    end-placeholder="结束时间"
    placeholder="选择时间范围"
    value-format="HH:mm:ss"
    @input="meal_time_update"
  />
</el-form-item>
this.meal_temp.meal_time = []
this.meal_temp.meal_time.push('00:00:00', '23:59:59')

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 简单设置el-date-picker的默认当前时间问题

    目录 设置el-date-picker的默认当前时间 el-date-picker 设置.读取值 el-date-picker 设置默认值 一.我们在取数据时 二.在设置默认值时 三.解决方法 设置el-date-picker的默认当前时间 这是显示当前时间,每次点开弹框都是当前的时间实现效果很简单 //html <el-form-item label="创建时间" :label-width="formLabelWidth" > <el-date-

  • Vue3 elementUI如何修改el-date-picker默认时间

    Vue3 elementUI如何修改el-date-picker默认时间

    目录 elementUI修改el-date-picker默认时间 el-date-picker设置默认时间区间 需求 代码和注释如下 elementUI修改el-date-picker默认时间 HTML: <el-date-picker    v-model="dateValue"    type="daterange"    size="small"    unlink-panels    range-separator="至&

  • vue el-date-picker动态限制时间范围案例详解

    vue el-date-picker动态限制时间范围案例详解

    分为两种情况 1.开始时间和结束时间同一个框(限制只能本月) 2.开始时间和结束时间分开两个框(限制开始时间不能早于当前时间且结束时间不超过开始时间一星期)  情况1 //情况1 原创版权声明:本文为weixin_40998880原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明. //本文链接:https://blog.csdn.net/weixin_40998880/article/details/106272897 //html <el-date-picke

  • vue element-ui el-date-picker限制选择时间为当天之前的代码

    vue element-ui el-date-picker限制选择时间为当天之前的代码 <el-date-picker v-model="firstdate" :picker-options="pickerOptions0" type="daterange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间&

  • 记录一个使用Spring Data JPA设置默认值的问题

    目录 Spring Data JPA设置默认值的问题 一开始经过百度,写法是这样的 于是改了第二版 在大佬的指点下,有了第三种写法 Jpa设置默认值约束 1.修改建表时的列定义属性 2.通过Hibernate(org.hibernate.annotations.ColumnDefault) Spring Data JPA设置默认值的问题 我有一个entity实体,其中里面有一个布尔类型的字段: //entity table注解略 public class TableEntity { privat

  • 【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)

    本文实例总结了jQuery实用代码片段.分享给大家供大家参考,具体如下: //each遍历文本框 清空默认值 $(".maincenterul1").find("input,textarea").each(function () { //保存当前文本框的值 var vdefault = this.value; $(this).focus(function () { if (this.value == vdefault) { this.value = "&q

  • 解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题

    这是一个项目中常见的需求,el-select 为下拉多选,默认值不可删除,或者指定值不可删除. 实现效果: el-select 如下源码中 tag closable 属性为 el-select 的 disabled 属性,所有明显不支持. 解决思路(从el-select 的角度来考虑,其他组件组合的情况暂不考虑) 想要实现某些选项是不删除,1.需要tag 不可删除,2.options 不可选择 options 不可选择很好实现,只需要给一个disabled属性.tag 不可删除才是关键.下面是我

  • Python中设置变量作为默认值时容易遇到的错误

    思考一下下面的代码片段: def foo(numbers=[]): numbers.append(9) print numbers 在这里,我们定义了一个 list (默认为空),给它加入9并且打印出来. >>> foo() [9] >>> foo(numbers=[1,2]) [1, 2, 9] >>> foo(numbers=[1,2,3]) [1, 2, 3, 9] 看起来还行吧?可是当我们不输入number 参数来调用 foo 函数时,神奇的事

  • JS简单设置下拉选择框默认值的方法

    本文实例讲述了JS简单设置下拉选择框默认值的方法.分享给大家供大家参考,具体如下: //根据下拉对象默认选中后台对应的记录 function setSelectOption(objSelect, targetValue){ if(objSelect){ var options = objSelect.options; if(options){ var len = options.length; for(var i=0;i<len;i++){ if(options[i].value == targ

  • 列出SQL Server中具有默认值的所有字段的语句

    列出SQL Server中具有默认值的所有字段的语句

    专家解答 通过查询任何数据库中的三个系统表,你可以获得每个表的每一个字段的默认值.下面是这个核心查询.它返回分配给当前数据库中每个用户表的默认值.这个查询在SQL 2000和SQL 2005中都是兼容的. Quote:  复制代码 代码如下: SELECT SO.NAME AS "Table Name", SC.NAME AS "Column Name", SM.TEXT AS "Default Value" FROM dbo.sysobject

  • 浅谈vue中$event理解和框架中在包含默认值外传参

    在vue中普通方法中默认带有event DOM事件如greet方法,如果是内联函数的话如warn方法,只需要在定义方法的地方同时传入$event即可,这里需要强调的是在iview中,这里用的是select组件,在其on-change事件中如果想要传入自定义的参数,使用直接传参的方式,获取的是传入的参数,那么如何获取到该方法默认的返回值(即不传参数时返回的默认选中值),这里使用 $event传入代表选中的值,如test方法,这里似乎也只要$event可以传入代表选中的值,其他的可能就是普通的参数,

  • java 注解默认值操作

    我就废话不多说了,大家还是直接看代码吧~ package com.zejian.annotationdemo; import java.lang.annotation.ElementType; import java.lang.annotation.Retention; import java.lang.annotation.RetentionPolicy; import java.lang.annotation.Target; /** * Created by wuzejian on 2017

  • MySQL 字段默认值该如何设置

    前言: 在 MySQL 中,我们可以为表字段设置默认值,在表中插入一条新记录时,如果没有为某个字段赋值,系统就会自动为这个字段插入默认值.关于默认值,有些知识还是需要了解的,本篇文章我们一起来学习下字段默认值相关知识. 1.默认值相关操作 我们可以用 DEFAULT 关键字来定义默认值,默认值通常用在非空列,这样能够防止数据表在录入数据时出现错误. 创建表时,我们可以给某个列设置默认值,具体语法格式如下: # 格式模板 <字段名> <数据类型> DEFAULT <默认值>

  • MySQL表字段时间设置默认值

    MySQL表字段时间设置默认值

    应用场景 在数据表中,要记录的每条数据是什么时候创建的,不需要应用程序去特意记录,而是由数据库获取当前时间自动记录创建时间. 在数据库中,要记录每条数据是什么时候修改的,不需要应用程序去特意记录,而由数据库获取当前时间自动记录修改时间. 在数据库中获取当前时间 oracle:select sysdate from dual; sqlserver:select getdate(); mysql:select sysdate();  select now(); MySQL中时间函数NOW()和SYS

随机推荐