基于bootstrap按年、季度、年月、年月日的日历插件(原创)

所属分类:输入-日期和时间

 25768  185  查看评论 (40)
分享到微信朋友圈
X
基于bootstrap按年、季度、年月、年月日的日历插件(原创) ie兼容8

更新时间:2020-07-02 22:02:19

更新说明:修改yk-datepicker.js中的bug,未压缩版的js与压缩版的不一致


更新时间:2020-06-16 00:47:14

更新说明:开放yk-datepicker.js源码

实际文件里面引用的都是min.js,这里面禁用调试了,如果需调试使用,请引用未压缩的js

yk-datepicker.js及yk-datepicker.min.js均放在js文件夹下


更新时间:2020-06-10 00:17:42

更新说明:添加日期范围选择,添加根据显示标准动态改变日历显示格式


更新时间:2020-06-09 00:08:47

介绍:

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

1、依赖环境

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>
    <label for="dtp_input3">年</label>
    <div data-date="" data-date-format="hh:ii" data-link-field="dtp_input3" data-link-format="hh:ii">
        <span><span ></span></span>
        <input size="16" type="text" value="" readonly>
    </div>
    <input type="hidden" id="dtp_input3" value="" /><br/>
</div>
<div>
    <label for="dtp_input3">季度</label>
    <div data-date="" data-date-format="hh:ii" data-link-field="dtp_input3" data-link-format="hh:ii">
        <span><span ></span></span>
        <input size="16" type="text" value="" readonly>
    </div>
    <input type="hidden" id="dtp_input3" value="" /><br/>
</div>
<div>
    <label for="dtp_input3">年月</label>
    <div data-date="" data-date-format="hh:ii" data-link-field="dtp_input3" data-link-format="hh:ii">
        <span><span ></span></span>
        <input size="16" type="text" value="" readonly>
    </div>
    <input type="hidden" id="dtp_input3" value="" /><br/>
</div>
<div>
    <label for="dtp_input3">年月日</label>
    <div data-date="" data-date-format="hh:ii" data-link-field="dtp_input3" data-link-format="hh:ii">
        <span><span ></span></span>
        <input size="16" type="text" value="" readonly>
    </div>
    <input type="hidden" id="dtp_input3" value="" /><br/>
</div>

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();
});
相关插件-日期和时间

jquery仿腾讯QQ空间时光轴静态页面

仿腾讯QQ空间时光轴静态页面
  日期和时间
 28476  370

jQuery日期时间选择器

基于Bootstrup 3的jQuery日期时间选择器
  日期和时间
 152101  468

漂亮的倒计时

漂亮的倒计时,带反转效果。
  日期和时间
 42078  328

基于vuejs的移动端未来30天时间选择器

此项目由于时间原因写的比较草,但是功能还是完善了,字体单位采用rem,所以在PC端预览的时候可能会出现兼容性问题
  日期和时间
 40517  374

讨论这个项目(40)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    じ★vの√荣 0
    2023/8/31 16:49:31
    下载测试下效果看看 回复
    村下秋桐 0
    2023/6/17 10:53:47
    小郭先生 0
    2022/6/17 12:45:07
    小郭先生 0
    2022/6/17 12:45:06
    〆amy、卟弃 0
    2022/4/2 15:28:11
    只显示年月代码在哪啊 回复
    幼稚鬼 0
    2021/11/16 10:35:43
    这个anglar 可以直接使用吗 回复
    追梦 0
    2021/11/14 14:08:41
    怎么还是不能调试啊
        叼着奶嘴闯天下♚0
        2022/1/25 11:20:14
        例子中引用的js是加密的,需要手动改成调用原始的那个js
        叼着奶嘴闯天下♚0
        2022/1/25 11:22:44
        引用yk-datepicker.js不要引用yk-datepicker.min.js,这个min.js 里面加入了禁止调试
    回复
    格格巫 0
    2021/8/25 17:02:45
    下载了,很好用的。想问下,在页面初始化时,把当前年月日显示在日期框里,怎么做呀?
        叼着奶嘴闯天下♚0
        2022/1/25 11:21:29
        js中控件初始完成后,手动设置一个值就可以了,与原控件格式一致
    回复
    XY 0
    2020/12/9 17:48:59
    点击输入框收起日历后,无法再次点击展示,非要输入框失去焦点才能再次点击显示,这个有办法解决吗?
        勇敢的心0
        2021/4/10 10:54:00
        自己根据需求调整JS呗
    回复
    K、先生 0
    2020/12/8 11:42:25
    季度选择完成后赋值成2020一季度不是2020-01 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复