Laydate实现季度选择器、半年度选择器

最新推荐文章于 2024-07-02 15:48:16 发布
最新推荐文章于 2024-07-02 15:48:16 发布
阅读量1k 收藏
点赞数
分类专栏： php 文章标签： css 前端 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lvshuocool/article/details/122614624
版权 

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>季度半年度选择器</title>

    <style>
    body{padding: 20px;}
    .demo-input{padding-left: 10px; height: 38px; min-width: 262px; line-height: 38px; border: 1px solid #e6e6e6;  background-color: #fff;  border-radius: 2px;}
    .demo-footer{padding: 50px 0; color: #999; font-size: 14px;}
    .demo-footer a{padding: 0 5px; color: #01AAED;}
    </style>
    <script src="laydate/jquery-1.11.1.min.js"></script> <!-- 改成你的路径 -->
    <script src="laydate/laydate.js"></script> <!-- 改成你的路径 -->
</head>

<body>
    <input type="text" class="demo-input" placeholder="请选择季度" id="season">
    <input type="text" class="demo-input" placeholder="请选择半年度" id="year">
    <input type="text" class="demo-input" placeholder="" id="reporting_date">



    <script>
        function seasonFunction(){
            renderSeasonDate(document.getElementById('season'), 1);
            function renderSeasonDate(ohd, sgl) {
                var ele = $(ohd);
                laydate.render({
                    elem: ohd,
                    theme: '#428bca',
                    type: 'month',
                    format: 'yyyy-第M季度',
                    range: sgl ? null : '~',
                    min: "1900-1-1",
                    max: "2999-12-31",
                    btns: ['confirm'],
                    ready: function () {
                        var hd = $("#layui-laydate" + ele.attr("lay-key"));
                        if (hd.length > 0) {
                            hd.click(function () {
                                ren($(this));
                            });
                        }
                        ren(hd);
                    },

                    done: function (value) {
                        var finaltime = '';
                        if (value){
                            value = value.split('-');
                            var year = value[0];
                            var season = value[1];
                            if (season == '第1季度'){
                                var timeend = '03-31';
                                finaltime =  year + '-' + timeend;
                            }
                            if (season == '第2季度'){
                                var timeend = '06-30';
                                finaltime =  year + '-' + timeend
                            }
                            if (season == '第3季度'){
                                var timeend = '09-30';
                                finaltime = year + '-' + timeend
                            }
                            if (season == '第4季度'){
                                var timeend = '12-31';
                                finaltime = year + '-' + timeend
                            }
                        }
                        $('#reporting_date').val(finaltime);
                    
                    }

                });
                var ren = function (thiz) {
                    var mls = thiz.find(".laydate-month-list");
                    mls.each(function (i, e) {
                        $(this).find("li").each(function (inx, ele) {
                            var cx = ele.innerHTML;
                            if (inx < 4) {
                                ele.innerHTML = cx.replace(/月/g, "季度").replace(/一/g, "第1").replace(/二/g, "第2").replace(/三/g, "第3").replace(/四/g, "第4");
                            } else {
                                ele.style.display = "none";
                            }
                        });
                    });
                }
            }
        }
        seasonFunction()

        function yearFunction(){
            renderYearDate(document.getElementById('year'), 1);
            function renderYearDate(ohd, sgl) {
                var ele = $(ohd);
                laydate.render({
                    elem: ohd,
                    theme: '#428bca',
                    type: 'month',
                    format: 'yyyy-h半年',
                    range: sgl ? null : '~',
                    min: "1900-1-1",
                    max: "2999-12-31",
                    btns: [ 'confirm'],
                    ready: function () {
                        var hd = $("#layui-laydate" + ele.attr("lay-key"));
                        if (hd.length > 0) {
                            hd.click(function () {
                                ren($(this));
                            });
                        }
                        ren(hd);
                    },

                    done: function (value) {
                        var finaltime = '';
                        if (value){
                            value = value.split('-');
                            var year = value[0];
                            var halfyear = value[1];

                            if (halfyear == '上半年'){
                                var timeend = '06-30';
                                finaltime = year + '-' + timeend
                            }
                            if (halfyear == '下半年'){
                                var timeend = '12-31';
                                finaltime = year + '-' + timeend
                            }
                        }
                        $('#reporting_date').val(finaltime);
                    
                    }

                });
                var ren = function (thiz) {
                    var mls = thiz.find(".laydate-month-list");
                    mls.each(function (i, e) {
                        $(this).find("li").each(function (inx, ele) {
                            var cx = ele.innerHTML;
                            if (inx < 2) {
                                cx = cx.replace(/月/g, "半年");
                                ele.innerHTML = cx.replace(/一/g, "上").replace(/二/g, "下");

                            } else {
                                ele.style.display = "none";
                            }
                        });
                    });
                }
            }
        }
        yearFunction()
    </script>
</body>

</html>

链接: https://pan.baidu.com/s/1wZK50A3Kyb48UfUrUEc4Tw

提取码: y5if

lvshuocool
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
laydate实现季度选择
12-18
实现季度选择，时间段选择， 亲测有效，还算好用。适用于大多数前端框架
layDate年季度月选择器.rar
08-18
此文件为laydate的年、季度、月的选择器，此为网络下载，经测可用，感谢原作者！上传留用，欢迎分享！
element-ui 季度时间选择器组件
最新发布
空大的博客
07-02 326
【代码】element-ui 季度时间选择器组件。
layui 实现日期按季度显示
Alan的博客
10-10 2023
效果： <label class="layui-form-label">季度选择：</label> <div class="layui-input-inline"> <input type="text" class="de...
laydate扩展季度选择器
weixin_43859736的博客
08-17 549
laydate扩展季度选择器laydate扩展季度选择器示例 laydate扩展季度选择器 根据leydate进行扩展，在原先基础上添加了一个季度选择功能，不影响其他地方正常使用，从而满足了填报期年、季度、月的选择 示例 源码下载地址: https://download.csdn.net/download/weixin_43859736/12718345. ...
laydate年月选择器大全.rar
12-30
这个"laydate年月选择器大全.rar"压缩包包含了使用laydate.js实现的各种年月日期选择器的实例，方便开发者快速集成到自己的项目中。下面我们将详细探讨laydate及其在年月选择上的应用。 首先，laydate.js是一个基于...
laydate.zip
08-17
- **新增选择器**：在原有的日期选择器基础上，增加了一个新的选择器，用于展示和选择季度。 - **日期处理逻辑**：需要编写处理逻辑，将用户选择的年份和季度转换为对应的月份范围，并在控件中正确显示。 - **模板...
layui多选级联选择器
02-23
在layui的实现中，级联选择器允许用户在一个层级结构中进行多选，提高了用户在大量数据中筛选信息的效率。 要创建一个多选级联选择器，你需要在HTML中定义一个元素作为选择器容器，并为其添加layui的class属性，如`...
laydate日期选择
05-26
一个基于laydate的日期选择控件小例子
element-ui 季度选择器
weixin_52919504的博客
10-19 4609
选择季度的组件
My97DatePicker 选择季度功能
03-01
项目需要通过My97DatePicker插件选择季度功能，在网上找了下基本都是一个人弄过但是分享的也不是很全面实现不了想要的功能，只好自己通过笨方法弄了个方便的版本。但是胜在能够实现。
Calender按季度选择日期
04-28
带有例子，日期按季度显示。为了赚点分所以给了资源分，请多谅解。谢谢
一个简约美观的月份选择器插件month-picker
11-08
这是一个jquery插件，可以实现年月份选择功能，简约美观，短小精悍，方便使用，同时也适合jquery插件开发学习。
layui实现季度选择
520_LH
09-05 2105
var dateParm = '' lay('#version').html('-v' + laydate.v); $Date = laydate; //季节选择 renderSeasonDate(document.getElementById('date'), 1); /** * 季度初始化 * @param ohd 季度input dom对象非jquery对象 ...
Layui时间范围选择器，添加【本周、本月、本季度、本年等常用时间快捷键】
个人记录
06-28 4148
Layui时间范围选择器，添加【本周、本月、本季度、本年等常用时间快捷键】
elementui时间季度选择器
weixin_47711357的博客
11-24 2260
<template> <div> 日期选择日期单个 <mark style="position:fixed;top:0;bottom:0;left:0;right:0;background:rgba(0,0,0,0);z-index:999;" v-show="showSeason" @click.stop="showSeason=false"></mark> <el-input placeholder="请选择季度" v-model
html 按季度选择时间,layDate 季度区间选择
weixin_35710005的博客
06-04 675
季度区间选择器body{padding:20px;}.demo-input{padding-left:10px;height:38px;min-width:262px;line-height:38px;border:1px solid #e6e6e6;background-color:#fff;border-radius:2px;}//季度计算varseasonFn= function(month...
vue的时间季度年选择器
weixin_53212534的博客
06-13 1341
使用说明。
laydate设置两个时间选择器后面的时间大于前面的
05-27
您好！感谢您的提问。如果您想要使用 laydate 设置两个时间选择器后面的时间大于前面的，您可以使用 laydate 的 `range` 参数来实现。具体步骤如下： 1. 在 HTML 中定义两个文本框，分别作为起始时间和结束时间的输入框。 ```html <input type="text" name="start" id="start" placeholder="请选择起始时间"> <input type="text" name="end" id="end" placeholder="请选择结束时间"> ``` 2. 在 JavaScript 中引入 laydate，并使用 `laydate.render()` 方法来渲染时间选择器。在 `laydate.render()` 的参数中，您可以通过 `range: true` 来启用时间范围选择器；通过 `min` 和 `max` 参数来设置起始时间和结束时间的最小值和最大值，从而实现后面的时间大于前面的效果。 ```javascript layui.use('laydate', function(){ var laydate = layui.laydate; //执行一个laydate实例 laydate.render({ elem: '#start', //起始时间的输入框 type: 'datetime', //选择器类型为日期时间 format: 'yyyy-MM-dd HH:mm:ss', //日期时间的格式 range: true, //启用时间范围选择器 max: '2099-06-16 23:59:59', //设置结束时间的最大值 done: function(value, date){ //选择起始时间后，更新结束时间的最小值 endTime.min = value; endTime.start = value; } }); //执行一个laydate实例 var endTime = laydate.render({ elem: '#end', //结束时间的输入框 type: 'datetime', //选择器类型为日期时间 format: 'yyyy-MM-dd HH:mm:ss', //日期时间的格式 range: true, //启用时间范围选择器 min: '1970-01-01 00:00:00', //设置起始时间的最小值 done: function(value, date){ //选择结束时间后，更新起始时间的最大值 startTime.max = value; } }); //起始时间的laydate实例 var startTime = laydate.render({ elem: '#start', //起始时间的输入框 type: 'datetime', //选择器类型为日期时间 format: 'yyyy-MM-dd HH:mm:ss', //日期时间的格式 range: true, //启用时间范围选择器 max: '2099-06-16 23:59:59', //设置结束时间的最大值 done: function(value, date){ //选择起始时间后，更新结束时间的最小值 endTime.min = value; endTime.start = value; } }); }); ``` 以上代码中，我们定义了三个 laydate 实例：`startTime` 用于起始时间的选择，`endTime` 用于结束时间的选择，`laydate.render()` 参数中的 `done` 回调函数用于更新起始时间和结束时间的最大值和最小值。 希望以上代码可以帮助到您！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值