手机版 | ------------全站资源有,统一解压码,解码平台,请点这里 ------------ 设首页 | 加收藏
当前位置: 网站首页 > jQuery库 > 文章 当前位置: jQ > 文章

jQuery和Bootstrap 4简单的日历插件

时间:2020-07-01    点击: 次    来源:网络    作者:佚名 - 小 + 大

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简单的日历插件 本地下载

上一篇:jQuery表单浮动标签插件

下一篇:智表-浏览器端仿EXCEL表格jQuery插件

推荐阅读
浙ICP备14024822号  |   QQ:79720816  |  地址:蚂蚁分享-一个只做有用的分享。  |  电话:13388629007  |  
Copyright © 2020 天人文章管理系统 版权所有,授权www.antqq.com使用 Powered by 55TR.COM