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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
|
Markup
=======
The following are examples of supported markup. On their own, these will not provide a datepicker widget; you will need to instantiate the datepicker on the markup.
input
-----
The simplest case: focusing the input (clicking or tabbing into it) will show the picker.
.. code-block:: html
<input type="text" value="02-16-2012">
.. figure:: _static/screenshots/markup_input.png
:align: center
component
---------
Adding the ``date`` class to an ``input-append`` or ``input-prepend`` bootstrap component will allow the ``add-on`` elements to trigger the picker.
.. code-block:: html
<div class="input-append date">
<input type="text" value="12-02-2012">
<span class="add-on"><i class="icon-th"></i></span>
</div>
.. figure:: _static/screenshots/markup_component.png
:align: center
date-range
----------
Using the ``input-daterange`` construct with multiple child inputs will instantiate one picker per input and link them together to allow selecting ranges.
.. code-block:: html
<div class="input-daterange">
<input type="text" class="input-small" value="2012-04-05" />
<span class="add-on">to</span>
<input type="text" class="input-small" value="2012-04-19" />
</div>
.. figure:: _static/screenshots/markup_daterange.png
:align: center
inline or embedded
------------------
Instantiating the datepicker on a simple div will give an embedded picker that is always visible.
.. code-block:: html
<div data-date="12/03/2012"></div>
.. figure:: _static/screenshots/markup_inline.png
:align: center
inline or embedded date-range
-----------------------------
Instantiating the datepicker is almost the same as a date range, but you'll need to set the ``inputs`` manually
.. code-block:: html
<div class="range">
<div class="range-start"></div>
<div class="range-end"></div>
</div>
.. code-block:: javascript
// Instantiate
$('.range').datepicker({
inputs: $('.range-start, .range-end')
});
// Manipulate dates
$('.range-start').datepicker('update', new Date(2013,1,1));
$('.range-end').datepicker('update', new Date(2013,5,1));
// Update the range (you have to fire this manually)
$('.range').datepicker('updateDates');
|
