Rumah > hujung hadapan web > tutorial js > jQuery日期范围选择器分析

jQuery日期范围选择器分析

小云云
Lepaskan: 2018-01-10 14:55:13
asal
2244 orang telah melayarinya

jQuery Date Range Picker是一款允许用户选择一个日期时间范围的jQuery日期选择器插件。整个日期选择器插件使用CSS来渲染样式,可以非常容易的使用CSS来定制皮肤。而且浏览器兼容性非常好,支持多种时间格式。

查看演示             下载源码

准备

使用该日期选择器插件需要 jQuery 1.3.2+和Moment 2.2.0+的支持。


1

2

3

<link rel="stylesheet" href="css/daterangepicker.css" rel="external nofollow" />

<script src="js/moment.min.js"></script>

<script src="js/jquery.daterangepicker.js"></script>

Salin selepas log masuk

HTML结构

在需要放置日期选择器的地方添加以下html结构,就是一个输入框。


1

<input type="text" id="datepicker" value="">

Salin selepas log masuk

调用插件

调用jQuery Date Range Picker插件非常简单,和其他常见的jQuery插件一样:


1

$(&#39;#datepicker&#39;).dateRangePicker(option);

Salin selepas log masuk

配置参数

该日期选择器的默认配置参数如下:


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

{

 format: &#39;YYYY-MM-DD&#39;,

 separator: &#39; to &#39;,

 language: &#39;auto&#39;,

 startOfWeek: &#39;sunday&#39;,// or monday

 getValue: function()

 {

  return this.value;

 },

 setValue: function(s)

 {

  this.value = s;

 },

 startDate: false,

 endDate: false,

 minDays: 0,

 maxDays: 0,

 showShortcuts: true,

 time: {

  enabled: false

 },

 shortcuts:

 {

  //&#39;prev-days&#39;: [1,3,5,7],

  &#39;next-days&#39;: [3,5,7],

  //&#39;prev&#39; : [&#39;week&#39;,&#39;month&#39;,&#39;year&#39;],

  &#39;next&#39; : [&#39;week&#39;,&#39;month&#39;,&#39;year&#39;]

 },

 customShortcuts : [],

 inline:false,

 container: &#39;body&#39;,

 alwaysOpen:false,

 singleDate:false,

 batchMode:false,

 beforeShowDay: [function],

 daypAttrs: [],

 dayTdAttrs: [],

 applyBtnClass: &#39;&#39;

}

Salin selepas log masuk

format (String):Moment的日期格式。点击这里查看Moment文档。

separator (String):日期字符串之间的分隔符。

language (String):预定义的语言是"en"和"cn"。你可以使用这个参数自定义语言。也可以设置为"auto"来让浏览器自己检测语言。

startOfWeek (String):"sunday" 或 "monday"。

getValue (Function):当从DOM元素中获取日期范围时会调用该函数,函数的上下文被设置为datepicker DOM。

setValue (Function):当向DOM元素中写入日期范围时调用该函数。

startDate (String or false):定义用户允许的最早日期,格式和format相同。

endDate (String or false):定义用户允许的最后日期,格式和format相同。

minDays (Number) :该参数定义日期范围的最小天数,如果设置为0,表示不限制最小天数。

maxDays (Number):该参数定义日期范围的最大天数,如果设置为0,表示不限制最大天数。

showShortcuts (Boolean) :先生或隐藏shortcuts区域。

time (Object):如果允许该参数就会添加时间的范围选择。

shortcuts (Object):定义快捷键按钮。

customShortcuts (Array):定义自定义快捷键按钮。

inline (Boolean):使用inline模式渲染该日期选择器,而不是overlay模式。如果设置为true,则要一起设置container参数。

container (String, css selector || DOM Object) :要进行渲染的日期选择器DOM元素。

alwaysOpen (Boolean):如果使用inline模式,你可能希望在页面加载时就渲染日期选择器。该参数设置为true时会隐藏"close"按钮。

singleDate (Boolean):设置为true可以选择单个的日期。

batchMode (false / 'week' / 'month'):自动批处理模式。

事件

当该日期选择器在DOM中选择某个日期范围时会触发三个事件。


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

$(&#39;#datepicker&#39;)

.dateRangePicker()

.bind(&#39;datepicker-change&#39;,function(event,obj)

{

 console.log(obj);

 // obj will be something like this:

 // {

 //  date1: (Date object of the earlier date),

 //  date2: (Date object of the later date),

 //  value: "2013-06-05 to 2013-06-07"

 // }

})

.bind(&#39;datepicker-apply&#39;,function(event,obj)

{

 console.log(obj);

})

.bind(&#39;datepicker-close&#39;,function()

{

 console.log(&#39;close&#39;);

});

Salin selepas log masuk

API

在你调用$(dom).dateRangePicker()之后:


1

2

3

4

5

6

$(dom).data(&#39;dateRangePicker&#39;)

 .setDateRange(&#39;2013-11-20&#39;,&#39;2013-11-25&#39;); //set date range, two date strings should follow the `format` in config object

 .clear(); // clear date range

 .close(); // close date range picker overlay

 .open(); // open date range picker overlay

 .destroy(); // destroy all date range picker related things

Salin selepas log masuk

项目地址:https://github.com/longbill/jquery-date-range-picker

相关推荐:

一种jQuery日期范围选择器使用教程

jQuery UI 日期选择器Datepicker详解

React Native开源时间日期选择器组件的有关详解

Atas ialah kandungan terperinci jQuery日期范围选择器分析. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan