自定義datetimepicker日期控件

Bootstrap v3.3.5

css

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

<code>/* ======================================== ys-datetimepicker ======================================== */</code>

<code>.ys-datetimepicker{</code>

<code>    </code><code>position</code><code>:</code><code>relative</code><code>;</code>

<code>    </code><code>width</code><code>:</code><code>100%</code><code>;</code>

<code>    </code><code>height</code><code>:</code><code>32px</code><code>;</code>

<code>    </code><code>cursor</code><code>:</code><code>pointer</code><code>;</code>

<code>}</code>

<code>.ys-datetimepicker&gt;input.form-control{</code>

<code>    </code><code>background-color</code><code>:</code><code>#fff</code><code>;</code>

<code>    </code><code>border-radius: </code><code>0</code><code>;</code>

<code>    </code><code>border</code><code>:</code><code>1px</code> <code>solid</code> <code>#ccc</code><code>;</code>

<code>    </code><code>padding-left</code><code>:</code><code>10px</code><code>;</code>

<code>.ys-datetimepicker:after{</code>

<code>    </code><code>content</code><code>:</code><code>""</code><code>;</code>

<code>    </code><code>position</code><code>:</code><code>absolute</code><code>;</code>

<code>    </code><code>top</code><code>:</code><code>0</code><code>;</code>

<code>    </code><code>right</code><code>:</code><code>0</code><code>;</code>

<code>    </code><code>display</code><code>:</code><code>block</code><code>;</code>

<code>    </code><code>width</code><code>:</code><code>32px</code><code>;</code>

<code>    </code><code>background</code><code>: </code><code>url</code><code>(../../images/common/ys-datetime-</code><code>icon</code><code>.png) </code><code>no-repeat</code> <code>center</code> <code>center</code><code>;</code>

<code>    </code><code>background-</code><code>size</code><code>:</code><code>20px</code> <code>20px</code><code>;</code>

<code>.datetimepicker.datetimepicker-dropdown-bottom-</code><code>right</code><code>.dropdown-menu .datetimepicker-minutes .minute.active,</code>

<code>.datetimepicker.datetimepicker-dropdown-bottom-</code><code>right</code><code>.dropdown-menu .datetimepicker-hours .hour.active,</code>

<code>.datetimepicker.datetimepicker-dropdown-bottom-</code><code>right</code><code>.dropdown-menu .datetimepicker-days .day.active,</code>

<code>.datetimepicker.datetimepicker-dropdown-bottom-</code><code>right</code><code>.dropdown-menu .datetimepicker-months .month.active,</code>

<code>.datetimepicker.datetimepicker-dropdown-bottom-</code><code>right</code><code>.dropdown-menu .datetimepicker-years .year.active{</code>

<code>    </code><code>background-image</code><code>:</code><code>none</code><code>;</code>

<code>    </code><code>background-color</code><code>:</code><code>#e64e4d</code><code>;</code>

html

<code>&lt;!-- 日期控件 --&gt;</code>

<code>&lt;</code><code>div</code> <code>class</code><code>=</code><code>"ys-datetimepicker"</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>input</code> <code>size</code><code>=</code><code>"16"</code> <code>class</code><code>=</code><code>"form-control"</code> <code>type</code><code>=</code><code>"text"</code> <code>value</code><code>=</code><code>"2015-10-01"</code> <code>readonly</code><code>=</code><code>""</code><code>/&gt;</code>

<code>&lt;/</code><code>div</code><code>&gt;</code>

javascript

<code>$(</code><code>".ys-datetimepicker input"</code><code>).datetimepicker({</code>

<code>    </code><code>language: </code><code>"zh-CN"</code><code>,</code>

<code>    </code><code>format:</code><code>"yyyy-mm-dd"</code><code>,</code>

<code>    </code><code>todayBtn:</code><code>"linked"</code><code>,</code>

<code>    </code><code>startView:2,</code>

<code>    </code><code>minView:2,</code>

<code>    </code><code>weekStart: 1,</code>

<code>    </code><code>todayHighlight: 1,</code>

<code>    </code><code>autoclose: 1,</code>

<code>    </code><code>forceParse: 0</code>

<code>});</code>

<code>$(</code><code>".ys-datetimepicker"</code><code>).on(</code><code>"click"</code><code>,</code><code>function</code><code>(e){</code>

<code>    </code><code>e.stopPropagation();</code>

<code>    </code><code>e.preventDefault();</code>

<code>    </code><code>$(</code><code>this</code><code>).closest(</code><code>".ys-datetimepicker"</code><code>).find(</code><code>"input"</code><code>).datetimepicker(</code><code>"show"</code><code>);</code>

 本文轉自 antlove 51CTO部落格，原文連結:http://blog.51cto.com/antlove/1786903