济南建站网站,网站建设的相关书籍,1688精品货源免费入口,正规优化公司哪家好目录 前言1. 通用Demo2. 快捷键3. 参数 前言
对于全栈玩家#xff0c;各个组件都需相应了解才可做好前后端的CRUD
以下为实战结合Element官网的心得体会
如图所示#xff1a; 1. 通用Demo
如果只想要一个选择日期#xff0c;而不是范围#xff0c;Demo如下#xff1a;… 目录 前言1. 通用Demo2. 快捷键3. 参数 前言
对于全栈玩家各个组件都需相应了解才可做好前后端的CRUD
以下为实战结合Element官网的心得体会
如图所示 1. 通用Demo
如果只想要一个选择日期而不是范围Demo如下
templatediv classblockspan classdemonstration默认/spanel-date-pickerv-modelvalue1typedateplaceholder选择日期/el-date-picker/divdiv classblockspan classdemonstration带快捷选项/spanel-date-pickerv-modelvalue2alignrighttypedateplaceholder选择日期:picker-optionspickerOptions/el-date-picker/div
/template截图如下 如果需要时间选择总体Demo如下
template!-- 包含快捷选项的日期选择器 --div classblock!-- 演示快捷选项 --span classdemonstration带快捷选项/span!-- 日期选择器组件 --el-date-pickerv-modelvalue2typedatetimerangealignrightunlink-panelsrange-separator至start-placeholder开始日期end-placeholder结束日期:picker-optionspickerOptions/el-date-picker/div
/templatescriptexport 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]);}}]},// 绑定的值1value1: ,// 绑定的值2value2: };}};
/script具体的参数解释如下
unlink-panels解除左右面板的联动各自独立切换当前月份选择日期范围时默认情况下左右面板会联动type为daterange则显示到日若为datetimerange则显示到秒
如果是按照默认月份具体如下
templatediv classblockspan classdemonstration带快捷选项/spanel-date-pickerv-modelvalue2typemonthrangealignrightunlink-panelsrange-separator至start-placeholder开始月份end-placeholder结束月份:picker-optionspickerOptions/el-date-picker/div
/templatescriptexport default {data() {return {pickerOptions: {shortcuts: [{text: 本月,onClick(picker) {picker.$emit(pick, [new Date(), new Date()]);}}, {text: 今年至今,onClick(picker) {const end new Date();const start new Date(new Date().getFullYear(), 0);picker.$emit(pick, [start, end]);}}, {text: 最近六个月,onClick(picker) {const end new Date();const start new Date();start.setMonth(start.getMonth() - 6);picker.$emit(pick, [start, end]);}}]},value1: ,value2: };}};
/script截图如下 2. 快捷键
对于快捷键选项除了实现上述方案还可如下
// 时间选择
pickerOptions: {shortcuts: [{text: 上周,onClick(picker) {const end new Date();const start new Date();// 设置起始日期为本周的第一天start.setDate(end.getDate() - end.getDay() - 6);// 设置结束日期为本周的最后一天end.setDate(end.getDate() - end.getDay() );picker.$emit(pick, [start, end]);}}, {text: 这周,onClick(picker) {const end new Date();const start new Date();// 设置起始日期为本周的第一天start.setDate(end.getDate() - end.getDay() 1);// 设置结束日期为本周的最后一天end.setDate(end.getDate() - end.getDay() 7);picker.$emit(pick, [start, end]);}}, {text: 下周,onClick(picker) {const end new Date();const start new Date();// 设置起始日期为下周的第一天start.setDate(end.getDate() - end.getDay() 8);// 设置结束日期为下周的最后一天end.setDate(end.getDate() - end.getDay() 14);picker.$emit(pick, [start, end]);}}]
},截图如下 pickerOptions: {disabledDate(time) {return time.getTime() Date.now();},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);}}]
},截图如下 3. 参数
更多的参数解释如下
格式含义备注例子yyyy 年2017M月不补01MM月01W周仅周选择器的 format 可用不补01WW周仅周选择器的 format 可用01d日不补02dd日02H小时24小时制不补03HH小时24小时制03h小时12小时制须和 A 或 a 使用不补03hh小时12小时制须和 A 或 a 使用03m分钟不补04mm分钟04s秒不补05ss秒05AAM/PM仅 format 可用大写AMaam/pm仅 format 可用小写amtimestampJS时间戳仅 value-format 可用组件绑定值为number类型1483326245000[MM]不需要格式化字符使用方括号标识不需要格式化的字符 (如 [A] [MM])MM
对于日期选择的更多参数说明
参数说明类型可选值默认值value / v-model绑定值date(DatePicker) / array(DateRangePicker)readonly完全只读booleanfalsedisabled禁用booleanfalseeditable文本框可输入booleantrueclearable是否显示清除按钮booleantruesize输入框尺寸stringlarge, small, miniplaceholder非范围选择时的占位内容stringstart-placeholder范围选择时开始日期的占位内容stringend-placeholder范围选择时结束日期的占位内容stringtype显示类型stringyear/month/date/dates/months/years week/datetime/datetimerange/ daterange/monthrangedateformat显示在输入框中的格式string见日期格式yyyy-MM-ddalign对齐方式stringleft, center, rightleftpopper-classDatePicker 下拉框的类名stringpicker-options当前时间日期选择器特有的选项参考下表object{}range-separator选择范围时的分隔符string‘-’default-value可选选择器打开时默认显示的时间Date可被new Date()解析default-time范围选择时选中日期所使用的当日内具体时刻string[]数组长度为 2每项值为字符串形如12:00:00第一项指定开始日期的时刻第二项指定结束日期的时刻不指定会使用时刻 00:00:00value-format可选绑定值的格式。不指定则绑定值为 Date 对象 string 见日期格式 —unlink-panels在范围选择器里取消两个日期面板之间的联动 boolean — falseprefix-icon自定义头部图标的类名stringel-icon-dateclear-icon自定义清空图标的类名stringel-icon-circle-closevalidate-event输入时是否触发表单的校验booleantrueappend-to-bodyDetePicker 自身是否插入至 body 元素上。booleantrue
