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

基于moment.js的jQuery日期选择器插件

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

简介

jQueryDatePicker是一款基于moment.js的jQuery日期选择器插件。该日期选择器插件使用moment.js来解析，校验和格式化日期时间，并提供ES5和ES6两种版本。

#####  使用方法
使用该日期选择器需要引入jquery和moment.min.js文件，以及插件所依赖的calendar.css文件，至于js文件有ES5和ES6两个版本，你可以使用其中的任意一个。

```html
<link rel="stylesheet" type="text/css" href="css/calendar.css">
<script src="path/to/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
<script src="js/es6.js"></script>  
```          
##### HTML结构
可以使用一个input元素来作为日期选择器的容器。

```html
<input type="text" placeholder="Date picker" id="singleDateRange"> 
```
#####  初始化插件
在页面DOM元素加载完毕之后，可以通过DatePicker()方法来初始化该焦点图插件。

```html
$('#singleDateRange').DatePicker({
  startDate: moment()
});
```
该日期选择器也可以作为日期范围选择器来使用，使用下面的方法来对它进行初始化：

```html
$('#rangedate').DatePicker({
  type: 'rangedate',
  startDate: moment().subtract(1, 'week'),
  endDate: moment(),
  ranges: [{
    label: "Yesterday",
    startDate: moment().subtract(1, 'day'),
    endDate: moment().subtract(1, 'day')
  }, {
    label: 'Sunday',
    startDate: moment().startOf('week'),
    endDate: moment()
  }, {
    label: '2 Weeks',
    startDate: moment().startOf('week').subtract(1, 'week'),
    endDate: moment()
  }, {
    label: 'This Month',
    startDate: moment().startOf('month'),
    endDate: moment()
  }, {
    label: 'Last Month',
    startDate: moment().startOf('month').subtract(1, 'month'),
    endDate: moment().startOf('month')
  }, {
    label: 'This Year',
    startDate: moment().startOf('year'),
    endDate: moment().startOf('moth')
  }]
});   
```               
#####  配置参数
jQueryDatePicker日期选择器插件可用的配置参数如下：

```html
{
    type: 'date', // || rangedate
    startDate: moment(), //startDate
    endDate: moment(), //endDate
    locale: 'ru',
    format: 'YYYY.MM.DD', //Display date format
    delimiter: '-', // display visual delimiter for rangedate type picker
    ranges: [], //ranges
    modalMode: false, //display center on screen
    firstDayOfWeek: 1, //for rus weekday fix)
    onShow: () => {},
    onHide: () => {}
}    
```  
| 参数  |  描述 |
| ------------ | ------------ |
| type  | 日期选择器的类型。可以是'date'（单日期选择器）或'rangedate'（日期范围选择器）。  |
|startDate：|开始日期。|
|endDate：|结束日期。|
|locale：|本地化语言。|
|format：|显示的日期格式。|
|delimiter：|日期范围选择器中两个日期之间的分隔线。|
|ranges：|日期范围。|
|modalMode：|模态窗口模式。|
|firstDayOfWeek：|每个星期的第一天。|
|onShow：|回调函数。|
|onHide：|回调函数。|

web299.com

基于moment.js的jQuery日期选择器插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

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

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

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