layui 单独使用日期组件
<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>layDate快速使用</title><link rel="stylesheet" href="/layui/css/layui.css" media="all"><style type="text/css">table{width: 500px !important;height: 500px !important;}.layui-laydate-main{width: 550px !important;height: 570px !important;}</style> </head> <body><script src="/js/jquery.min.js"></script> <script src="/js/date.format.js"></script> <script src="/layui/layui.js"></script><div class="site-demo-laydate" style="margin-top:50px; margin-left:700px;" ><div class="layui-inline" id="test-n1" ></div> </div> <script>layui.use('laydate', function(){var laydate = layui.laydate;//直接嵌套显示laydate.render({elem: '#test-n1',position: 'static',btns: []//button不显示,showBottom:false//底部不显示, ready: function (date) {//控件在打开时触发,回调返回一个参数//console.log(date); //得到初始的日期时间对象:{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}// $("#layui-laydate1").css("transform","scale(1)");//时间控件放大 这个不好changeColor ();}, change: function (value, date, endDate) {//日期时间被切换后的回调 // console.log(value); //得到日期生成的值,如:2017-08-18 // console.log(date); //得到日期时间对象:{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0} // console.log(endDate); //得结束的日期时间对象,开启范围选择(range: true)才会返回。对象成员同上。changeColor ();}, done: function (value, date, endDate) {//控件选择完毕后的回调---点击日期、清空、现在、确定均会触发。console.log(value); //得到日期生成的值,如:2017-08-18//console.log(date); //得到日期时间对象:{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}//console.log(endDate); //得结束的日期时间对象,开启范围选择(range: true)才会返回。对象成员同上。changeColor ();}}); // style="transform: scale(2);" style="margin-top:200px; margin-left:200px"});function changeColor (){//debugger;$('tbody tr').each(function(i){ // 遍历 tr$(this).children('td').each(function(j){ // 遍历 tr 的各个 td//alert("第"+(i+1)+"行,第"+(j+1)+"个td的值:"+$(this).text()+"。年月日为:"+$(this).attr("lay-ymd"));var date = $(this).attr("lay-ymd");var oldTime = (new Date(date)).getTime();var curTime = new Date(oldTime).Format("yyyy-MM-dd");$(this).attr('id',curTime);$(this).css("background","#FFFFFFFF");});});//需要提示显示的日期 可以选择的日期//var dayTimeList =["2019-2-7","2019-2-8","2019-2-9","2019-2-18","2019-2-19","2019-2-20","2019-4-7","2019-4-8"];var dayTimeList =["2019-02-07","2019-02-08","2019-02-09","2019-02-18","2019-02-19","2019-02-20","2019-04-07","2019-04-08"];for(var i = 0 ; i< dayTimeList.length;i++){$("#"+dayTimeList[i]).css("background","#3BA7FF");} // $("#2019-2-9").css("background","#3BA7FF"); // $("#2019-2-8").css("background","#3BA7FF"); // $("#2019-2-7").css("background","#3BA7FF");}</script> </body> </html>
****************************************************************************************************
date.format.js
/* eslint no-extend-native: 0 */(function () { // 对Date的扩展,将 Date 转化为指定格式的String // 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符, // 年(y)可以用 1-4 个占位符,毫秒(S)只能用 1 个占位符(是 1-3 位的数字) // 例子: // (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423 // (new Date()).Format("yyyy-M-d h:m:s.S") ==> 2006-7-2 8:9:4.18Date.prototype.Format = function (fmt) { //author: meizzvar o = {"M+": this.getMonth() + 1, //月份"d+": this.getDate(), //日"h+": this.getHours(), //小时"m+": this.getMinutes(), //分"s+": this.getSeconds(), //秒"q+": Math.floor((this.getMonth() + 3) / 3), //季度"S": this.getMilliseconds() //毫秒};if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));for (var k in o)if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));return fmt;} }).call(this)
layui 单独使用日期组件相关推荐
- layui之laydate组件简介
1.layui之laydate组件是什么 layui是一个编程大神贤心所作的前端框架.laydate是layui的日期组件. 2.layui组件的运用 1)基础参数选项 通过核心方法laydate.r ...
- layui之laydate日期组件在done中重新渲染
layui日期组件问题 layui组件在完成渲染赋值,在渲染时赋值均无问题, 最近遇到在done回调时发现赋值失败,参考其他人的写法特别复杂,我的这个写法简单且实用 思路:给我的input换个身体 h ...
- 二十八、layui的日历组件使用
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>日期& ...
- layui如何集成文件服务器,layui使用upload组件实现文件上传功能
layui使用upload组件实现文件上传功能 发布时间:2020-05-22 17:25:25 来源:亿速云 阅读:309 作者:鸽子 背景:页面上一个按钮,点击弹出上传框,从按钮的方法代码开始写: ...
- php 今天 明天 后天 显示10天,【微信小程序】实现含有今天,明天,后天的日期组件...
封面图.JPG 前言 做过微信小程序的前端er都知道,小程序有个日期组件,叫picker,但是,需求方要求日期和时间都要显示的,用picker组件的话,那就用到两个picker,date和time,就 ...
- antd的日期组件,月和周、年突然变成英文的修复
本来好好的项目,突然间日期组件有夹杂英文了,懵了,后来一查 重新用yarn add moment,安装一下moment就行了
- elementUI时间日期组件设置的默认时间在ie中无法重置
在使用elementUI的时间日期组件时往往会设置一个默认时间,此时如果同时设置了placeholder属性,在第一次进入页面时直接重置,调用elementUI的重置表单方法resetField,在I ...
- ElementUI日期组件(DatePicker )图标定制
1.问题 elementUI默认日期组件是这样的: 想要的效果 : 需要修改的有两处: 1.将'至'换成箭头图标 2.将左侧的icon移动到右边 2.解决 总共需要修改的只有三处 template修改 ...
- 头像裁剪框html css,GitHub - saintic/layui-cropper-avatar: Layui头像裁剪组件
layui-cropper-avatar Layui头像裁剪组件 说明 这是一款适用于Layui的[微改整合]第三方组件,基于cropper 3.1.3,实现点击一个按钮弹出裁剪框,完成选择.裁剪图片 ...
最新文章
- python 哈希表_哈希表哪家强?编程语言找你来帮忙!
- Linux网络编程——I/O复用之select详解
- 前端学习(2569):如何跨组件调用实例
- 在struts2中配置自定义拦截器放行多个方法
- Web常见漏洞修复建议
- Python版本微信跳一跳,软件配置
- 计算机网络-扩展路由器
- t60整了个vista!!感觉不错!
- 一篇文章彻底弄懂Base64编码原理
- 用《只狼》教你学会Git(中)
- 中科大高级软件工程课程心得
- 3.2 电信数据清洗
- 取整函数(ceil、floor、round)
- 滴滴裁员 2000 人,具体补偿方案已出
- 智慧畜牧养殖系统的感知设备
- 金士顿固态硬盘不认盘修复_30分钟大法固态硬盘不识别自检修复三十分钟的救盘方法如下...
- 张量分解和应用(1)
- 计算机在药店管理系统中的应用,计算机系统在药店管理系统中的应用(国外英语资料).doc...
- HCIA网络课程第四周作业
- 2021-01-28:IDEA快捷键command+/反斜杠接触不良问题
热门文章
- P1975 [国家集训队]排队(三维偏序)
- LuoguP4606 [SDOI2018]战略游戏
- 牛客挑战赛53G-同源数组(Easy Version)【NTT】
- P3225-[HNOI2012]矿场搭建【tarjan,图论】
- nssl1156-今天你AK了吗?【康托展开,高精度,二分答案,树状数组】
- P3957-跳房子【单调队列,dp,二分】
- 【图论】清理牛棚/Cleaning Shifts S(luogu 4644)
- [XSY3320] string (AC自动机,哈希,点分治)
- 数据库的这些性能优化,你做了吗
- Java阻塞队列ArrayBlockingQueue和LinkedBlockingQueue实现原理分析