日、周、月时间控件

最新推荐文章于 2025-06-08 10:50:56 发布

wl_

最新推荐文章于 2025-06-08 10:50:56 发布

阅读量3.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：可视化文章标签：时间组件 boostrap 日周月日历 datepicker

本文链接：https://blog.youkuaiyun.com/wanglei1991gao/article/details/71573805

可视化专栏收录该内容

20 篇文章

订阅专栏

本文介绍了一款用于生成不同周期（日、周、月）报表的时间选择控件实现方案，该控件使用Bootstrap3和My97DatePicker组件，并通过自定义JavaScript类进行初始化配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、.效果图
这里写图片描述

需求描述：
1.分别按日、周、月三中类型统计，每选一种日历的日期选择方式会发生变化
2.依赖：boostrap3 、My97DatePicker时间控件(http://www.my97.net/dp/demo/index.htm)

二、html代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
        <script src="js/My97DatePicker/WdatePicker.js"></script>
        <!--<script src="js/My97DatePicker/lang/zh-cn.js"></script>-->
        <style type="text/css">
            .dwm-date,
            .dwm-date-content {
                display: inline-block!important;
            }

            .dwm-date-type input{
                display: none;
            }

            .dwm-date-type:hover,
            .dwm-date-type:focus,
            .dwm-active  {
                background-color: #38a8da;
                color: #fff;
            }

            .dwm-date-content {
                vertical-align: middle;
            }

            .dwm-date-content,
            .dwm-date-content > input {
                height: 100%;
            }

            .dwm-date label {
                font-weight: normal;
                padding: 0;
                margin: 0;
            }


        </style>
    </head>
    <body>
        <div id="dwm-date-container">
            <!--控件html内容-->
            <div class="dwm-date">
                <div class="btn-group" role="group">
                  <button type="button" class="btn btn-default dwm-date-type">
                    <label>日<input type="radio" name="day" value="0" /></label>
                  </button>
                  <button type="button" class="btn btn-default dwm-date-type">
                    <label>周<input type="radio" name="week" value="0" /></label>
                  </button>
                  <button type="button" class="btn btn-default dwm-date-type">
                    <label>月<input type="radio" name="month" value="0" /></label>
                  </button>
                </div>
                <div class="dwm-date-content">
                    <input class="form-control Wdate" type="text" />
                </div>
            </div>
        </div>
        <script type="text/javascript" 
        src="js/jquery/jquery-1.11.1.min.js" ></script>
        <script type="text/javascript" src="js/DwmDate.js" ></script>
        <script>
            //日、周、月报时间控件初始化
            var dwmDateOption = {
                id:'#dwm-date-container',
                dayStartDate:'2016-01-01',
                weekStartDate:'2016-01-01',
                monthStartDate:'2016-01-01',
                weekEndDate:'2017-01-01'
            };

            var dwmDate = new DwmDate(dwmDateOption);
            dwmDate.init();
        </script>
    </body>
</html>

三、js代码
DwmDate.js

function DwmDate(option){

    var defaultOpt = {
        id:null,
        dayStartDate:'',
        weekStartDate:'',
        monthStartDate:'',
        dayEndDate:'',
        weekEndDate:'',
        monthEndDate:'',
        dType:'week' //day、week、month
    };

    option = $.extend(true, defaultOpt,option);

    this.dayStartDate = option.dayStartDate;
    this.weekStartDate = option.weekStartDate;
    this.monthStartDate = option.monthStartDate;
    this.dayEndDate   = option.dayEndDate;
    this.weekEndDate   = option.weekEndDate;
    this.monthEndDate   = option.monthEndDate;
    this.id = option.id;
    this.dType = option.dType;
    this._dayOption = {
        isShowWeek:true,
        firstDayOfWeek:1,
        dateFmt:'yyyy-MM-dd',
        realDateFmt:'yyyy-MM-dd',
        startDate:this.dayStartDate,
        minDate:this.dayStartDate,
        maxDate:'%y-%M-{%d-1}'
    };
    this._weekOption = {
        isShowWeek:true,
        firstDayOfWeek:1,//星期一为第一天
        dateFmt:'yyyy-MM-dd',
        realDateFmt:'yyyy-MM-dd',
        startDate:this.weekStartDate,
        minDate:this.weekStartDate,
        maxDate:this.weekEndDate,
        disabledDays:[1,2,3,4,5,6]
    };

    this._monthOption = {
        dateFmt:'yyyy年MM月',
        realDateFmt:'yyyy-MM-dd',
        startDate:this.monthStartDate,
        minDate:this.monthStartDate,
        maxDate:'%y-{%M-1}-%d'
    }

}

DwmDate.prototype.getDate = function(){
    return $(this.id).find(".Wdate").val();
}

DwmDate.prototype.getDType = function(){
    return this.dType;
}

DwmDate.prototype._getWdateOpt = function(type){
    if(type==="day"){
        return this._dayOption;
    }else if(type==="week"){
        return this._weekOption;
    }else{
        return this._monthOption;
    }
}

DwmDate.prototype.init = function(){
    var that = this;
    var wDate = $(that.id).find(".Wdate").get(0);

    $(that.id+" .dwm-date-type").click(function(event){
        var $this = $(this);
        $this.addClass("dwm-active").siblings().removeClass("dwm-active");
        //初始化日期插件
        wDate.onfocus = function(){
            that.dType = $this.find("input").attr("name");
            WdatePicker(that._getWdateOpt(that.dType));
        }
        return false;
    });

    $(that.id+" .dwm-date-type")
    .find("input[name='week']")
    .parent().parent().click();
}