Element中From表单（活动时间）的说明

1、在一些项目中，可能会需要用户选择时间或更改时间，此篇文章主要是来说明下图中红色内容和蓝色内容的设置。

2、样式图：

3、代码说明：

第一种情况：默认Element中的样式都是蓝色框的形式，代码如下：

<template>
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="活动时间"><el-col :span="11"><el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker></el-col><el-col class="line" :span="2">-</el-col><el-col :span="11"><el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker></el-col></el-form-item>
</template><script>export default {data() {return {form: {date1: '',date2: ''}}}}
</script>

第二种情况：上图红色框内容，即默认显示当前时间：

代码如下：

注： today的设置如下：

util.js中的文件：

export function parseTime(time, cFormat) {if (arguments.length === 0) {return null}if(time==null){return ''}const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'let dateif (typeof time === 'object') {date = time} else {if (typeof time === 'string' && /^[0-9]+$/.test(time)) {time = parseInt(time)}if (typeof time === 'number' && time.toString().length === 10) {time = time * 1000}date = new Date(time)}const formatObj = {y: date.getFullYear(),m: date.getMonth() + 1,d: date.getDate(),h: date.getHours(),i: date.getMinutes(),s: date.getSeconds(),a: date.getDay()}const timeStr = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {let value = formatObj[key]// Note: getDay() returns 0 on Sundayif (key === 'a') {return ['日', '一', '二', '三', '四', '五', '六'][value]}if (result.length > 0 && value < 10) {value = '0' + value}return value || 0})return timeStr
}

以上即为显示当前时间或默认开始（结束）时间的方法。

Element中From表单（活动时间）的说明相关推荐

element中form表单resetFields()方法重置表单无效
官方文档 // 调用resetFields但没有生效 resetForm() {this.$refs['form'].resetFields(); } 解决: form里需要ref 表单项el-for ...
修改element ui中form表单的 label 颜色样式
此时,emement ui的form表单的label(年龄二字)是黑色的. 原代码: <template><el-form :model="numberValidateFo ...
Element Ui使用技巧——Form表单的校验规则rules详细说明；element的 form 表单rules详细用法
本文章是在项目开发时遇到问题看到的一片好文, 摘录自[博客园]–[逍遥云天]. 感谢作者地址 – https://www.cnblogs.com/xyyt/p/13366812.html 在 [逍遥 ...
table中加表单元素怎么验证_element-ui 解决 table 里包含表单验证的问题！
实际项目中的场景,需要在table里做表单的验证,如图效果: 其实问题关键就在于如何给el-form-item动态绑定prop :prop="'tableData.' + scope.$in ...
掌财社:html5中AmazeUI框架中JS表单验证实战案例展示！
今天和大家分享个有关于"html5中AmazeUI框架中JS表单验证实战案例展示!"这方面的相关内容知识,让大家对于html5中AmazeUI框架也可以有所了解! 1.需求做一个 ...
Django中的表单如何使用? Django如何验证前端发来的数据? ✧*｡٩(ˊᗜˋ*)و✧*｡ Django初体验
文章目录前期准备前端准备表单基础使用创建表单表单类型 Field CharField(Field) IntergerField(Field)与 FloatField(Filed) Decim ...
JavaFX官方教程（五）之在JavaFX中创建表单
翻译自在JavaFX中创建表单在开发应用程序时,创建表单是一项常见活动.本教程将向您介绍屏幕布局的基础知识,如何将控件添加到布局窗格以及如何创建输入事件. 在本教程中,您将使用JavaFX构建如 ...
table中加表单元素怎么验证_el-table嵌入表单元素注意事项（验证规则prop写法与数据初始化）...
场景:在el-table表格中嵌入表单元素绑定数据: table : :data="planFormData.allocationPlan" el-form-item: v-mo ...
element实现form表单动态添加email效果
前言: vue中使用element实现form表单动态添加email效果效果: 实现步骤: 实现源代码: <template><div><el-form ref=&qu ...

Element中From表单（活动时间）的说明

1、在一些项目中，可能会需要用户选择时间或更改时间，此篇文章主要是来说明下图中红色内容和蓝色内容的设置。

以上即为显示当前时间或默认开始（结束）时间的方法。

Element中From表单（活动时间）的说明相关推荐

最新文章

热门文章