基于bootstrap按年、季度、年月、年月日的日历插件

时间:2024-04-11 20:02:23

基于bootstrap按年、季度、年月、年月日的日历插件,作为bootstrap-datetimepicker日历插件的扩展

可按年

基于bootstrap按年、季度、年月、年月日的日历插件

按季度

基于bootstrap按年、季度、年月、年月日的日历插件

按年月

基于bootstrap按年、季度、年月、年月日的日历插件

按年月日

基于bootstrap按年、季度、年月、年月日的日历插件

进阶:可以根据前面按年  季度 年月 ,  后面的日历控件显示对应的日历选项

基于bootstrap按年、季度、年月、年月日的日历插件

基于bootstrap按年、季度、年月、年月日的日历插件

 

基于bootstrap按年、季度、年月、年月日的日历插件

使用方法

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代码已上传

https://download.csdn.net/download/yank1225/12503320