分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 软件开发

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

发布时间:2023-09-06 02:30责任编辑:林大明关键词: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‘] = value11 ???????????} else if (id.indexOf(‘end_time‘) >= 0) {12 ????????????????act[‘end_time‘] = value13 ????????????}14 ??????????}15 ??????});

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

原文地址:https://www.cnblogs.com/lelexiu/p/10300784.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved