基于bootstrap按年、季度、年月、年月日的日历插件,作为bootstrap-datetimepicker日历插件的扩展
可按年
按季度
按年月
按年月日
进阶:可以根据前面按年 季度 年月 , 后面的日历控件显示对应的日历选项
使用方法
1-依赖的CSS与JS
CSS:bootstrap.min.css bootstrap-datetimepicker.min.css yk-datepicker.css
JS:jquery-1.8.3.min.js bootstrap.min.js bootstrap-datetimepicker.js yk-datepicker.min.js
2-HTML代码:下面只写一个按年的为例
<div class="form-group">
<label for="dtp_input3" class="col-md-2 control-label">年</label>
<div class="input-group date col-md-5" data-date="" data-date-format="hh:ii" data-link-field="dtp_input3" data-link-format="hh:ii">
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
<input class="form-control form_Y" size="16" type="text" value="" readonly>
</div>
<input type="hidden" id="dtp_input3" value="" /><br/>
</div>
3-JS代码:
// 按年
$('.form_Y').getY().on('changeDate', function(event) {
event.preventDefault();
event.stopPropagation();
});
// 按季度
$('.form_QT').getQT().on('changeDate', function(event) {
event.preventDefault();
event.stopPropagation();
});
// 按年月
$('.form_YM').getYM().on('changeDate', function(event) {
event.preventDefault();
event.stopPropagation();
});
// 按年月日
$('.form_YMD').getYMD().on('changeDate', function(event) {
event.preventDefault();
event.stopPropagation();
});
完整可运行的demo代码已上传