【JS】用JS实现系统常见日周月时间按钮切换效果

这里的页面样式基于bootstrap.css样式文件，时间控件引用的是datetimepicker.js,如果想详细了解时间控件的操作，可以参考网址http://www.bootcss.com/p/bootstrap-datetimepicker/,本篇文章只简单介绍按钮控件的简单切换，先上效果图：

1.HTML

<div class="btnDataType pull-left">
   <div class="btn-group dataType" id="time">
	   <div class="btn-group timeBtn" style="border:none">
	       <div class="btn btn-default DayRang" data-role="time" data-time="Day">日</div>
           <div class="btn btn-default WeekRang" data-role="time" data-time="week">周</div>
           <div class="btn btn-default MonthRang active" data-role="time" data-time="month">月</div>
		</div>
  </div>
  <div style="display: inline-block;">
      <form action="#" class="form-inline ">
          <div class="input-daterange input-group " id="Day" >
	          <input type="text" class="form-control" data-time="start">
	          <span class="input-group-addon">至</span>
              <input type="text" class="form-control" data-time="end">
          </div>
          <div class="input-daterange input-group" id="week" style="display: none;">
	          <input type="week" class="form-control" data-time="start">
              <span class="input-group-addon">至</span>
              <input type="week" class="form-control" data-time="end" value="">
         </div>
         <div class="input-daterange input-group" id="month" style="display: none;">
			<input type="text" class="form-control" data-time="start">
	        <span class="input-group-addon">至</span>
            <input type="text" class="form-control" data-time="end">
         </div>
       </form>
     </div>
  </div>

2.CSS样式
其中很多样式都引用了bootstrap.css文件，一些按钮样式或者相关的在这里就不在赘述

.btn-group {
    border: 1px solid #AAA4A4;
    border-radius: 3px;
    position: relative;
    display: inline-block;
    vertical-align: middle;
}
.btn-default {
    background: #fff;
    margin-top: 0;
    position: relative;
    top: 0;
    color: #2863AD;
    border: 0;
    z-index: 100;
}
.btn-default:hover, .content .btn-default.active{
    color: #fff;
    background: #2863AD;
    border-color: #2863AD;
}

3.JS代码

$(function(){
var todayDay = $.format.date(new Date(), 'yyyy-MM-dd');
var preMonth = $.format.date(new Date().setMonth(new Date().getMonth() - 1, 'yyyy-MM');
 var currMonth = $.format.date(new Date(), 'yyyy-MM');
   //日开始日期
    $('#Day [data-time="start"]').datetimepicker({
        language: 'zh-CN',
        weekStart: 1,
        todayBtn: true,
        autoclose: true,
        todayHighlight: true,
        startView: 1,//日视图
        minView: 1,
        format: 'yyyy-mm-dd',
        forceParse: true,
        endDate: todayDay
    }).val(todayDay).on('changeDate',function(e){
        $('#Day [data-time="end"]').datetimepicker('setStartDate', e.date);
    });//初始化input默认值

    //日结束日期
    $('#Day [data-time="end"]').datetimepicker({
        language: 'zh-CN',
        weekStart: 1,
        todayBtn: true,
        autoclose: true,
        todayHighlight: true,
        startView: 1,
        minView: 1,
        format: 'yyyy-mm-dd',
        forceParse: true,
        startDate: Hour,
        endDate: todayDay
    }).val(todayDay).on('changeDate',function(e){
        $('#Day [data-time="start"]').datetimepicker('setEndDate', e.date);
    });	

//月的开始时间
    $('#month [data-time="start"]').datetimepicker({
        language: 'zh-CN',
        weekStart: 1,
        todayBtn: true,
        autoclose: true,
        todayHighlight: true,
        startView: 2, //月视图
        minView: 2,
        format: 'yyyy-mm',
        forceParse: true,
        endDate: todayDay
    }).val(preMonth).on('changeDate',function(e){
        $('#month [data-time="end"]').datetimepicker('setStartDate', e.date);
    });//初始化input默认值

    //月的结束时间
    $('#month [data-time="end"]').datetimepicker({
        language: 'zh-CN',
        weekStart: 1,
        todayBtn: true,
        autoclose: true,
        todayHighlight: true,
        startView: 2,
        minView: 2,
        format: 'yyyy-mm',
        forceParse: true,
        startDate: preMonth,
        endDate: todayDay
    }).val(currMonth ).on('changeDate',function(e){
        $("#month [data-time='start']").datetimepicker('setEndDate', e.date);
    });

//实现按钮切换以及对应时间框的显示隐藏效果
//这里注意上面的html的<div>元素中的id="time",以及对应元素中data-time和data-role的用法，这种写法复用性很强，类似功能的直接修改对应id就可以
$('#time [data-role="time"]').click(function(e){
        $(e.currentTarget).addClass('active').siblings().removeClass('active') ;//增加删除时间选中的样式
	    $('#'+$(e.currentTarget).data('time')).show().siblings().hide();//显示隐藏对应选择时间的日期选择框
    });
})

这里结合了bootstrap框架和H5 的data-属性，有兴趣的可以了解一下，这里提供官方文档地址：
http://v3.bootcss.com/
下一篇接着更新时间选择器datetimepicker的用法，和这篇样式结合到一起，就可以根据自己的需求实现年月日周等时间选择的效果了