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

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

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

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


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

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

介绍:

基于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、使用

<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>
// 按年
$('.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();
});

请务必线上支付,通过线下支付的出现任何问题平台均不担保!

相关推荐

Worktile 企业级项目协作与目标管理工具

网站名称:Worktile企业级项目协作与目标管理工具网站网址:https://wo...

基于ets图表的综治云图

插件描述:基于echarts实现的大数据治理运行分析云图图表。注:因调用外部json...

WordPress纯代码实现ajax评论无限加载教程

WordPress纯代码实现ajax评论无限加载教程评论AJAX加载方式的优点在于用...

WordPress如何在文章列表编辑特色图像

在文章列表编辑特色图像,看到这句话大概就知道今天要分享的是什么功能了。具体效果如下图...

发表回复

登录... 后才能评论