zoukankan html css js c++ java

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

<!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;}
    </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,
                    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,
                    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/1Jt2JCPsro6h_dT2SB5RpdQ
提取码：zylu

Jquery插件有需要可自行下载：

百度网盘：https://pan.baidu.com/s/17oAuvPQAS11qtgk4k1Y4-A
提取码：c3cq

查看全文

相关阅读:
Django的filter查询
 第一篇博客
 算法：位运算加减乘除
 ip头、tcp头、udp头详解及定义，结合Wireshark抓包看实际情况
 linux ls -l 详解
 重要常用的Lunix命令
 开博感言（真正第一篇博客园博客）
校招与内推：软实力的技巧
 最长公共子串——动态规划求解
 最长公共子序列——动态规划求解

原文地址：https://www.cnblogs.com/zhangguosheng1121/p/12460438.html