成为VIP
统一声明：
1.本站联系方式QQ：1754646538 TG：@UXWNET 如果有其他人通过本站链接联系您导致被骗，本站一律不负责! 2.需要付费搭建请联系站长QQ：1754646538 TG：@UXWNET 3.国外免备案服务器- 游侠云服务 4.免实名域名注册购买- 游侠云域名 5.免实名国外服务器购买- 游侠网云服务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="https://www.mofangmall.com/bootstrap/4.0.0/css/bootstrap.min.css"><link rel="stylesheet" href="https://www.mofangmall.com/css/jquery.bootstrap.year.calendar.css"> <script src="https://www.mofangmall.com/js/jquery.min.js" type="text/javascript"></script><script src="https://www.mofangmall.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="https://www.mofangmall.com/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); });
$(‘.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
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，请使用WINRAR解压,如遇到无法解压的请联系管理员！
8. 精力有限，不少源码未能详细测试（解密），不能分辨部分源码是病毒还是误报，所以没有进行任何修改，大家使用前请进行甄别！
站长QQ：1754646538 站长邮箱：1754646538@qq.com
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，请使用WINRAR解压,如遇到无法解压的请联系管理员！
8. 精力有限，不少源码未能详细测试（解密），不能分辨部分源码是病毒还是误报，所以没有进行任何修改，大家使用前请进行甄别！
站长QQ：1754646538 站长邮箱：1754646538@qq.com
YUANLEI
