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

最新推荐文章于 2024-06-15 09:46:18 发布

yank1225

最新推荐文章于 2024-06-15 09:46:18 发布

阅读量2.5k

点赞数 2

文章标签： bootstrap datepicker

本文链接：https://blog.csdn.net/yank1225/article/details/106594298

版权

基于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代码：下面只写一个按年的为例

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

关注