自定义DatetimePicker起始默认值

大家好，欢迎使用mintUI。恭喜你进入到了需要自定义阶段。（嫌弃框架脸）
需求：

显示年月日时分
默认时间定义为本地实时时间
选择区间为本地时间的前13天
（不会敲代码，B事可多……哈哈，对不起，我错了。真香！）
效果：

根据以上需求，因为毕竟已经使用mint-ui多个功能，不能换框架，所以必须硬着头皮改。开始满足需求……啊~
项目：移动端，vue-cli+webpack+mint-ui
不说安装过程了……
1、使用input+DatetimePicker

<input type="text" id="timeOneStart" ref="timeOneStart" placeholder="请选择开始时间" @click="openPicker" readonly="readonly">

因为使用了readonly，所以觉得这个input有点假，不过现在没时间改。等待时间优化。
给input添加点击事件，绑定DatetimePicker。

 openPicker() {this.$refs.picker.open();}

2、注意：官网的属性均是驼峰的，自己的代码需要都写成以下的样子。不然你又会陷入懵逼……嘿嘿嘿。

<mt-datetime-picker ref="picker" year-format="{value}年" month-format="{value}月" date-format="{value}日" hour-format="{value}时" minute-format="{value}分" :start-date="startDate" :end-date="endDate" type="datetime" @confirm="handleConfirm"></mt-datetime-picker>

data(){return{startDate:new Date(),endDate:new Date()}
}

3、搞完上面的，你的东西就可以用了。但是你会发现你的起始日期起始的吓人。框架默认初始日期十年前。呵呵……于是，你可以自定义初始时间。

data(){return{startDate:new Date('2014'),endDate:new Date('2020')}
}

试试：如果只写年份，看看效果。把年月日写全，你再看看效果。
以上均设置完毕，对于本人的项目，只是满足了基本的需求，但是没有完成定向需求。
4、定向需求：结束时间为当前本地时间，所以startDate必须是当前时间的前13天。

openPicker(e) {//设置起始日期为当前时间的前13天this.$data.startDate = new Date(changeDate(new Date() - 13*86400*1000)+'');this.$refs.picker.open();}

changeDate方法为将毫秒转换成日期格式。但是！！！是个字符串！！！

function changeDate(dateA) {var dateJSON = new Date(dateA).toJSON();var date = new Date(+new Date(dateJSON)+8*3600*1000).toISOString().replace(/T/g,' ').replace(/\.[\d]{3}Z/,'');return date.substr(0,16);
}

因为startDate必须接收的是new Date格式的日期，所以转换完毕，必须使用new Date()转换下。

完成！！

吐槽：不喜欢这个日期选择功能，以后一定自己写个可高度自定义的插件。

自定义DatetimePicker起始默认值相关推荐

如何设置select-option的多项起始默认值
select-options: s_matnr for lips-matnr NO INTERVALS. initialization. s_matnr-low = '100-AB'. s_ma ...
php函数的默认值,php函数指定默认值方法的小例子
php函数指定默认值方法的小例子本节内容: php函数指定默认值在php编程中,为自定义函数设定默认值,当用户调用该函数时,如果不给参数指定值,参数会用默认值顶替. 例1, 复制代码代码如下: ...
在SQL和ERWIN中用自定义类型、规则和默认值实现check约束从而保证数据的完整性...
========================================================= /*创建一个名为list的规则,这条规则表明变量只能取0和1两个值*/ CREATE ...
【Groovy】闭包 Closure ( 自定义闭包参数 | 自定义单个闭包参数 | 自定义多个闭包参数 | 闭包参数默认值指定 )
文章目录一.自定义闭包参数列表 1.定义一个自定义参数的闭包 2.定义多个自定义参数的闭包 3.为闭包参数指定默认值二.完整代码示例一.自定义闭包参数列表如果要向闭包中 , 传递多个参数 ...
XBee3如何设置“自定义默认值”
自定义XBee Zigbee固件设备参数一旦在应用程序中进行测试并最终确定,这次参数,客户就可以把它们设为默认值. 这些自定义配置可以在制造设备时锁定固件版本或设置命令值,从而无需安装工程师现场调整 ...
Spring Boot笔记-自定义配置项默认值设置
如果用动态配置中心,如果漏了配置会很麻烦,spring boot可以设置个默认值如下: 这个是正常的: application.properties test.hello=Hello World My ...
ES6-ES11-第一部分-let、const、解构赋值、模板字符串、简化对象写法、箭头函数、函数参数默认值、rest 参数、扩展运算符、Symbol、迭代器、生成器、Promise、Set、Map
根据视频进行整理 [https://www.bilibili.com/video/BV1uK411H7on?p=1] 视频资源(百度网盘): 链接:[https://pan.baidu.com/s/1 ...
Golang：Go 网络包默认值下的陷阱
Go 网络包默认值下的陷阱超时时间 HTTP响应主体 HTTP / 1.x保持活动连接池验证URI DNS缓存伪装的DualStacknet.Dial()错误 net.IP 是可变的奖励:G ...
logback property 默认值_看完这篇文章还不会给spring boot配置logback，请你吃瓜
每一个成功人士的背后,必定曾经做出过勇敢而又孤独的决定. 放弃不难,但坚持很酷~ 一.logback日志框架 logback 是一个开源的日志组件,由三个部分组成:logback-core,logba ...
mysql报错无效默认值1067_Mysql 报错：#1067 - Invalid default value for 'update_time
由于字段UPDATE_TIME 的字段类型是 timestamp ,默认值是:'0000-00-00 00:00:00' 即:`UPDATE_TIME` timestamp NOT NULL DEF ...

自定义DatetimePicker起始默认值

自定义DatetimePicker起始默认值相关推荐

最新文章

热门文章