素材牛VIP会员

基于bootstrap的按年/季度/年月/年月日的日期区间选择插件

 所属分类:网页特效-时间日期,年月时间段

 浏览:90次  下载:0次  评论:0次  更新时间:2023-03-22
牛币素材VIP可免积分下载
基于bootstrap的按年/季度/年月/年月日的日期区间选择插件
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!   充值积分   充值会员   更多说明»
素材描述:基于bootstrap按年、季度、年月、年月日的日历插件,作为bootstrapdatetimepicker的扩展

详细介绍

更新时间:2020-07-02

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


更新时间:2020-06-16

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

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

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


更新时间:2020-06-10

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

介绍:

基于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();
});

文件目录结构

  • bootstrap
    • css
      • ┝ bootstrap-datetimepicker.min.css
      • ┝ bootstrap-theme.css
      • ┝ bootstrap-theme.min.css
      • ┝ bootstrap.min.css
      • ┝ yk-datepicker.css
    • js
      • ┝ bootstrap-datetimepicker.js
      • ┝ bootstrap-datetimepicker.min.js
      • ┝ bootstrap.js
      • ┝ bootstrap.min.js
      • ┝ index - 副本.js
      • ┝ index.min.js
      • locales
        • ┝ bootstrap-datetimepicker.ar.js
        • ┝ bootstrap-datetimepicker.az.js
        • ┝ bootstrap-datetimepicker.bg.js
        • ┝ bootstrap-datetimepicker.bn.js
        • ┝ bootstrap-datetimepicker.ca.js
        • ┝ bootstrap-datetimepicker.cs.js
        • ┝ bootstrap-datetimepicker.da.js
        • ┝ bootstrap-datetimepicker.de.js
        • ┝ bootstrap-datetimepicker.ee.js
        • ┝ bootstrap-datetimepicker.el.js
        • ┝ bootstrap-datetimepicker.es.js
        • ┝ bootstrap-datetimepicker.fi.js
        • ┝ bootstrap-datetimepicker.fr.js
        • ┝ bootstrap-datetimepicker.he.js
        • ┝ bootstrap-datetimepicker.hr.js
        • ┝ bootstrap-datetimepicker.hu.js
        • ┝ bootstrap-datetimepicker.hy.js
        • ┝ bootstrap-datetimepicker.id.js
        • ┝ bootstrap-datetimepicker.is.js
        • ┝ bootstrap-datetimepicker.it.js
        • ┝ bootstrap-datetimepicker.ja.js
        • ┝ bootstrap-datetimepicker.ka.js
        • ┝ bootstrap-datetimepicker.ko.js
        • ┝ bootstrap-datetimepicker.lt.js
        • ┝ bootstrap-datetimepicker.lv.js
        • ┝ bootstrap-datetimepicker.ms.js
        • ┝ bootstrap-datetimepicker.nb.js
        • ┝ bootstrap-datetimepicker.nl.js
        • ┝ bootstrap-datetimepicker.no.js
        • ┝ bootstrap-datetimepicker.pl.js
        • ┝ bootstrap-datetimepicker.pt-BR.js
        • ┝ bootstrap-datetimepicker.pt.js
        • ┝ bootstrap-datetimepicker.ro.js
        • ┝ bootstrap-datetimepicker.rs-latin.js
        • ┝ bootstrap-datetimepicker.rs.js
        • ┝ bootstrap-datetimepicker.ru.js
        • ┝ bootstrap-datetimepicker.sk.js
        • ┝ bootstrap-datetimepicker.sl.js
        • ┝ bootstrap-datetimepicker.sv.js
        • ┝ bootstrap-datetimepicker.sw.js
        • ┝ bootstrap-datetimepicker.th.js
        • ┝ bootstrap-datetimepicker.tr.js
        • ┝ bootstrap-datetimepicker.ua.js
        • ┝ bootstrap-datetimepicker.uk.js
        • ┝ bootstrap-datetimepicker.zh-CN.js
        • ┝ bootstrap-datetimepicker.zh-TW.js
      • ┝ yk-datepicker.js
      • ┝ yk-datepicker.min.js
  • ┝ index.html
  • jquery
    • ┝ jquery-1.8.3.min.js

相关素材 - 时间日期,年月时间段

讨论这个素材(0)回答他人问题或分享使用心得会奖励牛币

〒_〒 居然一个评论都没有……

 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0 已下载次数:0
所需牛币:20 开始下载

牛币获取:签到、评论、充值    » 在线充值(10牛币=1元)