layer 日期laydate年月日切换渲染

首先引入所需资源

<link rel="stylesheet" href="./layui/css/layui.css">
<script src="./layui/layui.js"></script>
<script src="./jquery-2.2.2.js"></script>

1、HTML

<div><span class="comSpanTit tabTime"><font class="cur" name="year">年</font><font name="month">月</font><font name="day">日</font></span><input class="csb_text y_td_w88 m_r_0" id="tabStart" type="text" placeholder="yyyy" /><span class="csb_span timeSeparate">&nbsp;-&nbsp;</span><input class="csb_text y_td_w88 m_r_0" id="tabEnd" type="text" placeholder="yyyy" /></div>

2、JS

layui.use('laydate', function(){var laydate = layui.laydate;/** 年月日时间日期选择*/laydate.render({elem: '#tabStart',type: 'year',theme: '#3f8efc'});laydate.render({elem: '#tabEnd',type: 'year',theme: '#3f8efc'});$(".tabTime font").each(function(){var timeName = $(this).attr("name");$(this).on("click" , function(){$(this).addClass("cur").siblings().removeClass("cur");if(timeName == "year"){console.log(timeName)$(".timeSeparate").prev().remove();$(".timeSeparate").next().remove();$(".timeSeparate").before('<input class="csb_text y_td_w88 m_r_0" id="tabStart" type="text" placeholder="yyyy" />');$(".timeSeparate").after('<input class="csb_text y_td_w88 m_r_0" id="tabEnd" type="text" placeholder="yyyy" />');laydate.render({elem: '#tabStart',type: 'year',theme: '#3f8efc'});laydate.render({elem: '#tabEnd',type: 'year',theme: '#3f8efc'});}if(timeName == "month"){console.log(timeName)$(".timeSeparate").prev().remove();$(".timeSeparate").next().remove();$(".timeSeparate").before('<input class="csb_text y_td_w88 m_r_0" id="tabStart" type="text" placeholder="yyyy-MM" />');$(".timeSeparate").after('<input class="csb_text y_td_w88 m_r_0" id="tabEnd" type="text" placeholder="yyyy-MM" />');laydate.render({elem: '#tabStart',type: 'month',theme: '#3f8efc'});laydate.render({elem: '#tabEnd',type: 'month',theme: '#3f8efc'});}if(timeName == "day"){console.log(timeName+"1111111111")$(".timeSeparate").prev().remove();$(".timeSeparate").next().remove();$(".timeSeparate").before('<input class="csb_text y_td_w88 m_r_0" id="tabStart" type="text" placeholder="yyyy-MM-dd" />');$(".timeSeparate").after('<input class="csb_text y_td_w88 m_r_0" id="tabEnd" type="text" placeholder="yyyy-MM-dd" />');laydate.render({elem: '#tabStart',theme: '#3f8efc'});laydate.render({elem: '#tabEnd',theme: '#3f8efc'});}})});});

layer 日期laydate年月日切换渲染相关推荐

vue项目中使用 Echarts的一些总结，包括饼图，折现图，折柱混图，年月日切换
先奉上官网地址,一切以官网为主 Echrts官网 Echarts的基本使用安装 cnpm i echarts -S 全局使用在main.js中引入,然后用变量,将其挂载到vue的原型上 impor ...
layer日期和时间组件限制最大日期和 js获取昨天日期
layer日期和时间组件限制最大日期 html: <input class="layui-input" id="test" autocomplete=&q ...
Problem G: 函数---判断日期（年月日）是否合法
Problem G: 函数---判断日期(年月日)是否合法 Time Limit: 1 Sec Memory Limit: 128 MB Submit: 566 Solved: 240 Descr ...
mysql 获取农历年份_iOS 获取公历、农历日期的年月日
iOS 获取公历.农历日期的年月日介绍三种方法获取 Date (NSDate) 的年月日. 用 date 表示当前日期.测试日期为公历 2017 年 2 月 5 日,农历丁酉年,鸡年,正月初九. l ...
【java获取日期的年月日】
java获取日期的年月日 String dateStr = "2022-09-26 17:26:33"; Date date = new SimpleDateFormat(&quo ...
Date日期操作-年月日，时分秒获取
直接上代码 package com.util; import java.text.DateFormat; import java.util.Calendar; import java.util.Dat ...
element日期选择器年月日选择
element日期选择器年月日选择 1,效果图 2,月和日官网上都有现成的,直接拿来用,年手动写的 <div class="tableoptbox"><div ...
获取今天的日期（年月日时分秒）、获取今天昨天明天的日期
1.获取今天的日期(年月日时分秒) getCurrentTime() {let yy = new Date().getFullYear();let mm = new Date().getMonth() ...
iOS 获取公历、农历日期的年月日
iOS 获取公历.农历日期的年月日原文地址:http://www.cnblogs.com/silence-cnblogs/p/6368437.html 介绍了用Calendar.DateCompon ...
elemenUI 2.x：单选框控制日期选择器的切换
ElementUI 日期选择器的切换实现方式一:同一个日期组件,通过修改属性实现 <!DOCTYPE html> <html lang="en">< ...

layer 日期laydate年月日切换渲染

layer 日期laydate年月日切换渲染相关推荐

最新文章

热门文章