当前位置：首页 > 网页特效 > 日期和时间

jQuery和Bootstrap 4简单的日历插件

分类：日期和时间日期：2024-05-14 点击(1) 评论(0)

简介

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

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

```html
<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结构如下：

```html
<div class="container">
  <div class="calendar"></div>
</div>   
```            
#####  初始化插件
在页面 DOM元素加载完毕之后，可以通过calendar()方法来初始化该jquery日历插件。

```html
$('.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个可用的事件，如下：

```html
<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);
  });
```

web299.com

jQuery和Bootstrap 4简单的日历插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果