layui改变laydate日历的样式

2024-01-06 20:32

本文主要是介绍layui改变laydate日历的样式,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

因项目需要将layui日历的样式进行了改变,主要改变如下:

1.在layui日历中添加价格

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>test</title><link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all"><style>#test-n1 .layui-laydate-main{width: 350px;}.price{border-top: 1px solid black;color: red;}</style>
</head>
<body>
<div id="test-n1"></div><script src="../../layuiadmin/layui/layui.js"></script>
<script src="../../js/jquery-1.8.3.js"></script>
<script>layui.use('laydate',function () {var laydate = layui.laydate;//直接嵌套显示laydate.render({elem: '#test-n1',position: 'static',min: 0,ready: function(date){//$('.layui-this').removeClass('layui-this');//去掉默认选中当前日期console.log(date); //得到初始的日期时间对象:{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}var choosedate = $('.layui-laydate-content td[class=""]');//选中所有显示日期的tdchoosedate.append("<div class=\"price\">¥100</div>");//在选中的td中加入显示价价格的div},done: function(value, date, endDate){console.log(value); //得到日期生成的值,如:2017-08-18console.log(date); //得到日期时间对象:{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}},change: function(value, date, endDate){var choosedate = $('.layui-laydate-content td[class=""]');choosedate.append("<div class=\"price\">¥100</div>");}});});</script>
</body>
</html>

运行结果:

2.单点选中日期,或按Ctrl键连选日期

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>test</title><link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
</head>
<body>
<div id="test-n1"></div><script src="../../layuiadmin/layui/layui.js"></script>
<script src="../../js/jquery-1.8.3.js"></script>
<script>layui.use('laydate',function () {var laydate = layui.laydate;var prevCheckDate;      // 记录上次ctrl+鼠标选中的日期//直接嵌套显示laydate.render({elem: '#test-n1',position: 'static',min: 0,ready: function(date){$('.layui-this').removeClass('layui-this');//去掉默认选中的当前日期var choosedate = $('.layui-laydate-content td[class=""]');// 绑定点击事件choosedate.unbind("click").click(function(event){// 记录每次选中的元素var checkDates = $('.layui-laydate-content td[mychecked="true"]');// 将历史选中的日期全部添加样式checkDates.addClass('layui-this');// 判断当前点击元素是否已经被选择过了if($(this).attr('mychecked') == 'true'){$(this).attr('class','');$(this).removeAttr('mychecked');return;}// 为选中的元素设置一个标记$(this).attr('mychecked','true');// 监听点击事件发生时,用户是否按下了ctrl键if(event.ctrlKey) {if(prevCheckDate){var nowCheckDate = $(this).attr('lay-ymd');prevCheckDate = new Date(prevCheckDate.replace(/-/g,"/"));nowCheckDate = new Date(nowCheckDate.replace(/-/g,"/"));var nyear = nowCheckDate.getFullYear();var pyear = prevCheckDate.getFullYear();var nmonth = nowCheckDate.getMonth() + 1;var pmonth = prevCheckDate.getMonth() + 1;var nday = nowCheckDate.getDate();var pday = prevCheckDate.getDate();if(nyear == pyear && nmonth == pmonth){var i = nday > pday ? pday:nday;var j = nday > pday ? nday:pday;for(i;i < j;i++){$('td[lay-ymd="'+nyear+'-'+nmonth+'-'+i+'"]').addClass('layui-this');$('td[lay-ymd="'+nyear+'-'+nmonth+'-'+i+'"]').attr('mychecked','true');}}}// 重置上次ctrl选中元素prevCheckDate = $(this).attr('lay-ymd');}else{prevCheckDate = null;}});}});});</script>
</body>
</html>

运行结果:

这篇关于layui改变laydate日历的样式的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/577517

相关文章

vue解决子组件样式覆盖问题scoped deep

《vue解决子组件样式覆盖问题scopeddeep》文章主要介绍了在Vue项目中处理全局样式和局部样式的方法,包括使用scoped属性和深度选择器(/deep/)来覆盖子组件的样式,作者建议所有组件... 目录前言scoped分析deep分析使用总结所有组件必须加scoped父组件覆盖子组件使用deep前言

react笔记 8-18 事件 方法 定义方法 获取/改变数据 传值

1、定义方法并绑定 class News extends React.Component {constructor(props) {super(props)this.state = {msg:'home组件'}}run(){alert("我是一个run") //方法写在类中}render() {return (<div><h2>{this.state.msg}</h2><button onCli

在项目开发中,jsp页面不会少了,如何公用页面(添加页面和修改页面)和公用样式代码(css,js)?

在项目开发中,如何公用添加页面和修改页面? <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><html><head><title>岗位设置</title><%@ include file="/WEB-INF/jsp/public/common.jspf"%></head><body> <!-- 标

【前端】animation动画以及利用vue制作简单的透明度改变动画,包含vue生命周期实现

一. 问题描述 想做一个文字透明度从1到0然后再从0到1的css动画。 二. 代码写法 2.1 animation写法 2.1.1 animation属性key 2.1.2 代码展示 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=de

纯css实现checkbox的checked样式

纯css也能实现checked样式 今天使用微信的WEUI的checkbox的时候,发现点击checkbox是有checked和unchecked的变化的,但是想要去获得checkbox的checked状态时,发现event listener里居然没有该checkbox的click之类的事件。这才发现,weui只是纯粹的css样式,没有对应组件的js代码。那么问题来了,没有js事件,weui是如

WebAPI (一)DOM树、DOM对象,操作元素样式(style className,classList)。表单元素属性。自定义属性。间歇函数定时器

文章目录 Web API基本认知一、 变量声明二、 DOM1. DOM 树2. DOM对象3. 获取DOM对象(1)、选择匹配的第一个元素(2)、选择匹配多个元素 三、 操作元素1. 操作元素内容2. 操作元素属性(1)、常用属性(href之类的)(2)、通过style属性操作CSS(3)、通过类名(className)操作CSS(4)、通过classList操作控制CSS(5)、操作表单

HTML5如何成为改变移动互联网幕后的推手

在未来的某一天,我们打开手机,不再需要访问手机应用商店,不论是 Apple的还是Google的,我们只需要点击手机主菜单页面上的一个链接,手机就会立即在它的浏览器上启动一个 “应用程序”;再也不需要flash插件,就能欣赏华丽丽视频画面。   AD:2013云计算架构师峰会课程资料下载   2012年,说HTML5集千宠万爱于一身也毫不夸张,IE、Chrome、Firefox和Opera等

心觉:如何用一颗心改变世界和自己

关于如何开发自己的潜意识开发的底层逻辑和注意事项 我这里就不赘述了,可以看我前面的文章 今天主要讲一下,如何让我们祈祷的作用发挥到极致 这里提到了祈祷,其实就是正念 把自己的梦想,目标,愿望通过积极的语言 或者生动形象的画面告诉自己的潜意识 你的这些梦想,目标,愿望就会慢慢地变成现实 这是真的,有无数的案例可以证实 我这里就不举例子了,大家可以网上搜 我只讲一下,为什么有些人

Android style(样式), theme(主题)资源

本文内容摘自《疯狂Android讲义 第三版-李刚著作》 样式和主题资源都用于对Android应用进行“美化”,只要充分利用Android应用的样式和主题资源,开发者就可以开发出各种风格的Android应用。 样式资源(style): 如果我们经常需要对某个类型的组件指定大致相似的格式,比如字体,颜色,背景色等,如果次都要为View组件重复指定这些属性,无疑会有大量的工作量,而且不利于项目后