bootstrap的datepicker、datetimepicker和jquery的datepicker使用心得

首先感谢网易LOFTER博主Ivy的博客,我才顿悟了问题所在,希望给后面用这几款插件的童鞋一个提醒,别犯和我同样的错误!

这里是lvy博主写的博客:http://10305101ivy.blog.163.com/blog/static/5847658920135434648580/

API调用网上一大把,我就不介绍了,大家自己百度。但是一定要注意他们的不同用法

这里主要讲的是区别:


一、bootstrap的datepicker:

2013年bootstrap火了,之后推出了许多使用插件,其中包括bootstrap的datepicker

Github开源地址:https://github.com/eternicode/bootstrap-datepicker

在线文档:http://bootstrap-datepicker.readthedocs.org/en/latest/

二、datetimepicker:

此项目是bootstrap-datetimepicker 项目 的一个分支,原项目不支持 Time 选择。
其它部分也进行了改进、增强,例如load 过程增加了对 ISO-8601 日期格式的支持。

具体的大家可以看看这儿http://www.bootcss.com/p/bootstrap-datetimepicker/


三、jquery的datepicker:

jQuery UI很强大,其中的日期选择插件Datepicker是一个配置灵活的插件,我们可以自定义其展示方式,包括日期格式、语言、限制选择日期范围、添加相关按钮以及其它导航等。
官方地址:http://docs.jquery.com/UI/Datepicker,官方示例: http://jqueryui.com/demos/datepicker/

一个不错的地址,用来DIY jQuery UI界面效果的站点http://jqueryui.com/themeroller/


我之前用到了bootstrap的datepicker

然后我使用了jquery的datepicker的调用方法,把两者混淆了。

$('#job-calendar').datepicker({
            dateFormat: "yyyy-mm-dd",
            language: "zh-CN",
            onSelect: gotoDate
        });

function gotoDate(ev){

            window.location.href = "XXXX.html" + "?Date=" + ev.date.getFullYear().toString() + "-"+ (ev.date.getMonth()+1).toString()+ "-"+ ev.date.getDate().toString();
        }

得不到我要的选择日期,页面跳转的效果。以为是版本的问题,更换最新版本后还是不行。后来才发现有两款datepicker插件。

以下是bootstrap的datepicker的api调用方法。

$('#job-calendar').datepicker({
            dateFormat: "yyyy-mm-dd",
            language: "zh-CN",
            onSelect: gotoDate
        }).on('changeDate',gotoDate);

主要是想让大家注意的是,看清楚自己用的是哪个插件,去找对应的api,一些细微的差别真够折腾好久的!

  • 4
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值