• 文章介绍
  • 评价建议
  • jQuery和Bootstrap 4简单的日历插件

    简要教程

    jquery-bootstrap-year-calendar是一款 jQuery和Bootstrap 4简单的日历插件。该日历插件使用简单,支持配置多种i10n语言。并提供事件来设置或获取当前的日期。

    使用方法

    在页面中引入jquery和boostrap4相关文件。以及jquery.bootstrap.year.calendar.css和jquery.bootstrap.year.calendar.js文件。

    <link rel="stylesheet" href="bootstrap/4.0.0/css/bootstrap.min.css"><link rel="stylesheet" href="css/jquery.bootstrap.year.calendar.css"><script src="js/jquery.min.js" type="text/javascript"></script><script src="bootstrap/4.0.0/js/bootstrap.min.js"></script><script src="js/jquery.bootstrap.year.calendar.js"></script>
    HTML结构

    使用该bootstrap 4 日历的基本HTML结构如下:

    <div class="container"> <div class="calendar"></div></div>
    初始化插件

    在页面 DOM元素加载完毕之后,可以通过calendar()方法来初始化该jquery日历插件。

    $(\'.calendar\').calendar();

    配置参数

    该jQuery和Bootstrap 4简单的日历插件的可用配置参数有:

    • showHeaders:是否显示月份名称,默认为true
    • startYear:日历初始化是显示的年份,默认为当前年份。
    • maxYear:显示的最大年份,默认值为null
    • minYear:显示的最小年份,默认值为null
    • cols:bootstrap的网格,默认是12格。可以设置为1-12的任意整数。
    • colsSm:bootstrap SM(超小)网格,默认是6格。可以设置为1-12的任意整数。
    • colsMd:bootstrap MD(中等)网格,默认是4格。可以设置为1-12的任意整数。
    • colsLG:bootstrap LG(大型)网格,默认是3格。可以设置为1-12的任意整数。
    • colsXL:bootstrap XL(超大)网格,默认是3格。可以设置为1-12的任意整数。
    • i10n:设置本地化语言。

    事件

    该jQuery和Bootstrap 4简单的日历插件有3个可用的事件,如下:

    <div class=”container”> <div class=”calendar”></div></div>
    $(‘.calendar’).calendar(); //tiggered when year is chaned to previous $(‘.calendar’).on(‘jqyc.changeYearToPrevious’, function (event) { var currentYear = $(this).find(‘.jqyc-change-year’).data(‘year’); console.log(currentYear); });//tiggered when year is chaned to next $(‘.calendar’).on(‘jqyc.changeYearToNext’, function (event) { var currentYear = $(this).find(‘.jqyc-next-year’).data(‘year’); console.log(currentYear); });//tiggered when day is clicked $(‘.calendar’).on(‘jqyc.dayChoose’, function (event) { var choosenYear = $(this).data(‘year’); var choosenMonth = $(this).data(‘month’); var choosenDay = $(this).data(‘day-of-month’); var date = new Date(choosenYear, choosenMonth, choosenDay); console.log(date); });

    关于该jQuery和Bootstrap 4简单的日历插件更加详细的介绍,请查看github:https://github.com/zatorck/jquery-bootstrap-year-calendar

    郑重声明:

    本站所提供的“

    jQuery和Bootstrap 4简单的日历插件

    ”资源来自于网络,版权争议与本站无关,版权归原创者所有!仅限用于学习和研究目的,不得将上述内容资源用于商业或者非法用途,否则,一切后果请用户自负。

    1. 本站所有内容均由互联网收集整理、网友上传,仅供大家参考、学习,不存在任何商业目的与商业用途。

    2. 若您需要商业运营或用于其他商业活动,请您购买正版授权并合法使用。

    3. 如果你也有好源码或者教程,可以到审核区发布,分享有魔币奖励和额外收入!

    4. 不保证所有资源都完整可用,不排除存在加密、BUG、需要授权或者残缺的可能,由于资源的特殊性,下载后一律不予退货。

    5. 魔方资源网不提供任何技术支持及安装服务,请自行做好评估。

    6. 如有链接无法下载、失效或广告宣传,请联系客服QQ:256382490 尽快为您处理!

    7. 本站所有的资源并非收费,用户只要登陆,签到后就可以获取相应魔币用于兑换用于学习参考使用,所有的会员费用网站用来做站点的运维费用,所需的魔币不是资源本身的价值,和资源没直接关系!

    8. 如遇到加密压缩包,默认解压密码为"www.mofangmall.com或mofangmall.com",如遇到无法解压的请联系管理员!

    9. 如无法链接失效或侵犯版权,请先联系我们点击这里给我发消息256382490@qq.com

    发表评论