前端组件:超好用的日期选择器,支持全部日期格式已经Vue.js中的使用

Posted lelexiu

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端组件:超好用的日期选择器,支持全部日期格式已经Vue.js中的使用相关的知识,希望对你有一定的参考价值。

首先官网地址:https://www.layui.com/laydate/ 高达11w的下载量

效果:

技术分享图片

 

怎么使用这个呢?

首先当然就是导包了,自己去官网下哈

需要主注意的是,

laydate.js 和theme文件下要放在同一级目录,自己也可以在laydate.js搜索关键字 theme 去修改对应路径,为了省去麻烦咋们就直接放在同级目录。

一般js的使用

Date.prototype.Format = function (formatStr) {
            var str = formatStr;
            var Week = [‘日‘, ‘一‘, ‘二‘, ‘三‘, ‘四‘, ‘五‘, ‘六‘];

            str = str.replace(/yyyy|YYYY/, this.getFullYear());
            str = str.replace(/yy|YY/, (this.getYear() % 100) > 9 ? (this.getYear() % 100).toString() : ‘0‘ + (this.getYear() % 100));

            str = str.replace(/MM/, this.getMonth() > 9 ? this.getMonth().toString() : ‘0‘ + this.getMonth());
            str = str.replace(/M/g, this.getMonth());

            str = str.replace(/w|W/g, Week[this.getDay()]);

            str = str.replace(/dd|DD/, this.getDate() > 9 ? this.getDate().toString() : ‘0‘ + this.getDate());
            str = str.replace(/d|D/g, this.getDate());

            str = str.replace(/hh|HH/, this.getHours() > 9 ? this.getHours().toString() : ‘0‘ + this.getHours());
            str = str.replace(/h|H/g, this.getHours());
            str = str.replace(/mm/, this.getMinutes() > 9 ? this.getMinutes().toString() : ‘0‘ + this.getMinutes());
            str = str.replace(/m/g, this.getMinutes());

            str = str.replace(/ss|SS/, this.getSeconds() > 9 ? this.getSeconds().toString() : ‘0‘ + this.getSeconds());
            str = str.replace(/s|S/g, this.getSeconds());

            return str;
        }

laydate.render({
      elem: ‘#xxx‘,
      format: ‘yyyy-MM-dd‘,
      start: new Date().Format(‘yyyy-MM-dd‘),//设置开始时间为今天
       });

在Vue.js中使用,在回调函数中去手动设置act[‘start_time‘] = value,act是Vue的data中的数据,

关键一点下面代码需要写在Vue的方法里面进行初始化

 1 laydate.render({
 2       elem: ‘#xxxx‘,
 3       type: ‘datetime‘,
 4       format: ‘yyyy-MM-dd HH‘,
 5       start: new Date().Format(‘yyyy-MM-dd HH‘),
 6       done: function (value, date, endDate) {
 7           console.log(id, id.indexOf(‘start_time‘)); //在控件上弹出value值
 8           console.log(id, id.indexOf(‘end_time‘)); //在控件上弹出value值
 9           if (id.indexOf(‘start_time‘) >= 0) {
10                 act[‘start_time‘] = value
11            } else if (id.indexOf(‘end_time‘) >= 0) {
12                 act[‘end_time‘] = value
13             }
14           }
15       });

 


 

以上是关于前端组件:超好用的日期选择器,支持全部日期格式已经Vue.js中的使用的主要内容,如果未能解决你的问题,请参考以下文章

elementui日期选择能支持按旬选择吗?

php [WooCommerce预订]在前端未使用日历选择器时更改日期格式

角材料日期选择器日期格式

JavaScript:日期选择器组件的使用

JavaScript:日期选择器组件的使用

Material UI 日期选择器 日期格式 React