datepicker 季度

由于是新加的  没有修改原来的js

bootstrap-datepicker.js

原理就是 一个div的隐藏和显示

html  我是用两个文本框，所以用两个div，用的是比较笨的办法，有时间再重构下js和html

<div id="quartersone" style="display: none;">
<div class="datepicker datepicker-dropdown dropdown-menu datepicker-orient-left datepicker-orient-top" style="display: inherit; top: 130.25px; left: 161.5px; z-index: 850;">
    <div class="datepicker-quarters" style="display: block;"><table class="table table-condensed">
        <thead>
        <tr>
            <th class="prev" οnclick="yearPrev(this)" n>&lt;&lt;</th>
            <th class="datepicker-switch">2016</th>
            <th class="next" οnclick="yearNext(this)">&gt;&gt;</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td colspan="7">
                <span class="quarter quartersCheck" val="Q1" ckId="sDate">一季度</span>
                <span class="quarter quartersCheck" val="Q2"  ckId="sDate">二季度</span>
                <span class="quarter quartersCheck" val="Q3"  ckId="sDate">三季度</span>
                <span class="quarter quartersCheck" val="Q4"  ckId="sDate">四季度</span>
            </td>
        </tr>
        </tbody>
        <tfoot><tr><th colspan="7" class="today" style="display: none;">今天</th></tr><tr><th colspan="7" class="clear" style="display: none;">清除</th></tr></tfoot></table></div>
</div>
</div>
<div id="quarterstwo" style="display: none;">
<div class="datepicker datepicker-dropdown dropdown-menu datepicker-orient-left datepicker-orient-top" style="display: inherit;top: 130.25px; left: 255.05px; z-index: 850;">
    <div class="datepicker-quarters" style="display: block;"><table class="table table-condensed">
        <thead>
        <tr>
            <th class="prev" οnclick="yearPrev(this)" n>&lt;&lt;</th>
            <th class="datepicker-switch">2016</th>
            <th class="next" οnclick="yearNext(this)">&gt;&gt;</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td colspan="7">
                <span class="quarter quartersCheck" val="Q1" ckId="eDate">一季度</span>
                <span class="quarter quartersCheck" val="Q2"  ckId="eDate">二季度</span>
                <span class="quarter quartersCheck" val="Q3"  ckId="eDate">三季度</span>
                <span class="quarter quartersCheck" val="Q4"  ckId="eDate">四季度</span>
            </td>
        </tr>
        </tbody>
        <tfoot><tr><th colspan="7" class="today" style="display: none;">今天</th></tr><tr><th colspan="7" class="clear" style="display: none;">清除</th></tr></tfoot></table></div>
</div>
</div>

文本框html

<label class="btn btn-primary btn-sm active" id="dateRangeByDay">
    <input type="radio" name="DateRange"
           class="radionDateRange" value="m" id="option0">月度
</label>
<label class="btn btn-primary btn-sm" id="dateRangeByMonth">
    <input type="radio" name="DateRange"
           class="radionDateRange" value="q" id="option1">季度
</label>
<!--<label class="btn btn-primary btn-sm" id="dateRangeByYear">-->
    <!--<input type="radio" name="DateRange"-->
           <!--class="radionDateRange" value="y" id="option2">年度-->
<!--</label>-->
<input type="text" class="input-sm" style="width: 90px; margin-left:5px"
       placeholder="开始时间" id="sDate" name="sDate"  value="" >
<input type="text" class="input-sm" style="width: 90px;"
       placeholder="结束时间" id="eDate" name="eDate"  value="" >

js

//季度年份初始化  放在 $(function(){}) 中
var myDate = new Date();
var stryear = myDate.getFullYear();
$(".datepicker-switch").html(stryear); 

//移除原来时间控件 js渲染效果 （）

    function setDataPickerremove() {

       $("#sDate").datepicker('remove');
       $("#eDate").datepicker('remove');
       $("#sDate").bind("click",function(){
           showquarters(this);
       });
       $("#eDate").bind("click",function(){
           showquarters(this);
       });

       $(".quartersCheck").bind("click",function(){
           var str =$(this).parents(".datepicker-quarters").find(".datepicker-switch").html();
           var ckid = $(this).attr("ckId");
           $("#"+ckid).val(str+$(this).attr("val"));
           $("#quartersone").hide();
           $("#quarterstwo").hide();
       });
   }
   //年份减
   function yearPrev(obj){
      var year = $(obj).next();

      $(year).html(parseInt(year.html())-1)
   }

   //年份加
   function yearNext(obj){
       var year = $(obj).parent().find("th").eq(1);
       $(year).html(parseInt(year.html())+1)

   }


//时间控件展示 
   function showquarters(obj){
       if($(obj).attr("Id")=="sDate")
       {
           $("#quarterstwo").hide();
           $("#quartersone").show();

       }else if($(obj).attr("Id")=="eDate"){
           $("#quartersone").hide();
           $("#quarterstwo").show();
       }
   }

切换时间控件 使用unbind移除点击效果

$(".radionDateRange").change(function() {
    var dataRangeValue = $('input[name="DateRange"]:checked').val();
    $("#sDate").unbind("click");
    $("#eDate").unbind("click");
    $("#quartersone").hide();
    $("#quarterstwo").hide();
    if (dataRangeValue == 'm') {       //按月
        setDataPicker(1,1,'yyyy-mm', '{{minTime}}', '{{maxTime}}');
    }
    else if (dataRangeValue == 'q') {            //按季度
        setDataPickerremove();
    }
    else if (dataRangeValue == 'y') {       //按年
        setDataPicker(2,2,'yyyy', '{{minTime}}'.substring(0,4), '{{maxTime}}'.substring(0,4));
    }
});