日、周、月时间控件

一、.效果图
日、周、月时间控件

需求描述：
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();
}

秒客网

日、周、月时间控件

相关文章