Skip to content

Commit 612b2f8

Browse files
eternicodeeternicode
committed
Merge syntax highlighting from lenniboy/master
Closes uxsolutions#219
2 parents 140bb7a + cc60fd0 commit 612b2f8

File tree

1 file changed

+145
-101
lines changed

1 file changed

+145
-101
lines changed

‎README.md

Lines changed: 145 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -10,101 +10,119 @@ contributed to by him (yet?)
1010

1111
Attached to a field with the format specified via options:
1212

13-
<input type="text" value="02-16-2012" id="datepicker">
14-
######
15-
$('#datepicker').datepicker({
16-
format: 'mm-dd-yyyy'
17-
});
13+
```html
14+
<input type="text" value="02-16-2012" id="datepicker">
15+
```
16+
```javascript
17+
$('#datepicker').datepicker({
18+
format: 'mm-dd-yyyy'
19+
});
20+
```
1821

1922
Attached to a field with the format specified via data tag:
2023

21-
<input type="text" value="02/16/12" data-date-format="mm/dd/yy" id="datepicker" >
22-
######
23-
$('#datepicker').datepicker();
24+
```html
25+
<input type="text" value="02/16/12" data-date-format="mm/dd/yy" id="datepicker" >
26+
```
27+
```javascript
28+
$('#datepicker').datepicker();
29+
```
2430

2531
As component:
2632

27-
<div class="input-append date" id="datepicker" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
28-
<input size="16" type="text" value="12-02-2012" readonly>
29-
<span class="add-on"><i class="icon-th"></i></span>
30-
</div>
31-
######
32-
$('#datepicker').datepicker();
33+
```html
34+
<div class="input-append date" id="datepicker" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
35+
<input size="16" type="text" value="12-02-2012" readonly>
36+
<span class="add-on"><i class="icon-th"></i></span>
37+
</div>
38+
```
39+
```javascript
40+
$('#datepicker').datepicker();
41+
```
3342

3443
Attached to non-field element, using events to work with the date values.
3544

36-
<div class="alert alert-error" id="alert">
37-
<strong>Oh snap!</strong>
38-
</div>
39-
<table class="table">
40-
<thead>
41-
<tr>
42-
<th>
43-
Start date
44-
<a href="#" class="btn small" id="date-start" data-date-format="yyyy-mm-dd" data-date="2012-02-20">Change</a>
45-
</th>
46-
<th>
47-
End date
48-
<a href="#" class="btn small" id="date-end" data-date-format="yyyy-mm-dd" data-date="2012-02-25">Change</a>
49-
</th>
50-
</tr>
51-
</thead>
52-
<tbody>
53-
<tr>
54-
<td id="date-start-display">2012-02-20</td>
55-
<td id="date-end-display">2012-02-25</td>
56-
</tr>
57-
</tbody>
58-
</table>
59-
######
60-
var startDate = new Date(2012,1,20);
61-
var endDate = new Date(2012,1,25);
62-
$('#date-start')
63-
.datepicker()
64-
.on('changeDate', function(ev){
65-
if (ev.date.valueOf() > endDate.valueOf()){
66-
$('#alert').show().find('strong').text('The start date must be before the end date.');
67-
} else {
68-
$('#alert').hide();
69-
startDate = new Date(ev.date);
70-
$('#date-start-display').text($('#date-start').data('date'));
71-
}
72-
$('#date-start').datepicker('hide');
73-
});
74-
$('#date-end')
75-
.datepicker()
76-
.on('changeDate', function(ev){
77-
if (ev.date.valueOf() < startDate.valueOf()){
78-
$('#alert').show().find('strong').text('The end date must be after the start date.');
79-
} else {
80-
$('#alert').hide();
81-
endDate = new Date(ev.date);
82-
$('#date-end-display').text($('#date-end').data('date'));
83-
}
84-
$('#date-end').datepicker('hide');
85-
});
45+
```html
46+
<div class="alert alert-error" id="alert">
47+
<strong>Oh snap!</strong>
48+
</div>
49+
<table class="table">
50+
<thead>
51+
<tr>
52+
<th>
53+
Start date
54+
<a href="#" class="btn small" id="date-start" data-date-format="yyyy-mm-dd" data-date="2012-02-20">Change</a>
55+
</th>
56+
<th>
57+
End date
58+
<a href="#" class="btn small" id="date-end" data-date-format="yyyy-mm-dd" data-date="2012-02-25">Change</a>
59+
</th>
60+
</tr>
61+
</thead>
62+
<tbody>
63+
<tr>
64+
<td id="date-start-display">2012-02-20</td>
65+
<td id="date-end-display">2012-02-25</td>
66+
</tr>
67+
</tbody>
68+
</table>
69+
```
70+
```javascript
71+
var startDate = new Date(2012,1,20);
72+
var endDate = new Date(2012,1,25);
73+
$('#date-start')
74+
.datepicker()
75+
.on('changeDate', function(ev){
76+
if (ev.date.valueOf() > endDate.valueOf()){
77+
$('#alert').show().find('strong').text('The start date must be before the end date.');
78+
} else {
79+
$('#alert').hide();
80+
startDate = new Date(ev.date);
81+
$('#date-start-display').text($('#date-start').data('date'));
82+
}
83+
$('#date-start').datepicker('hide');
84+
});
85+
$('#date-end')
86+
.datepicker()
87+
.on('changeDate', function(ev){
88+
if (ev.date.valueOf() < startDate.valueOf()){
89+
$('#alert').show().find('strong').text('The end date must be after the start date.');
90+
} else {
91+
$('#alert').hide();
92+
endDate = new Date(ev.date);
93+
$('#date-end-display').text($('#date-end').data('date'));
94+
}
95+
$('#date-end').datepicker('hide');
8696
});
97+
```
8798

8899
As inline datepicker:
89100

90-
<div id="datepicker"></div>
91-
######
92-
$('#datepicker').datepicker();
101+
```html
102+
<div id="datepicker"></div>
103+
```
104+
```javascript
105+
$('#datepicker').datepicker();
106+
```
93107

94108

95109
# Using bootstrap-datepicker.js
96110

97111
Call the datepicker via javascript:
98112

99-
$('.datepicker').datepicker()
113+
```javascript
114+
$('.datepicker').datepicker()
115+
```
100116

101117
## Dependencies
102118

103119
Requires bootstrap's dropdown component (`dropdowns.less`) for some styles, and bootstrap's sprites (`sprites.less` and associated images) for arrows.
104120

105121
A standalone .css file (including necessary dropdown styles and alternative, text-based arrows) can be generated by running `build/build_standalone.less` through the `lessc` compiler:
106122

107-
$ lessc build/build_standalone.less datepicker.css
123+
```bash
124+
$ lessc build/build_standalone.less datepicker.css
125+
```
108126

109127
## Options
110128

@@ -186,10 +204,12 @@ Whether or not to force parsing of the input value when the picker is closed. T
186204

187205
Format a component.
188206

189-
<div class="input-append date" id="datepicker" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
190-
<input class="span2" size="16" type="text" value="12-02-2012">
191-
<span class="add-on"><i class="icon-th"></i></span>
192-
</div>
207+
```html
208+
<div class="input-append date" id="datepicker" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
209+
<input class="span2" size="16" type="text" value="12-02-2012">
210+
<span class="add-on"><i class="icon-th"></i></span>
211+
</div>
212+
```
193213

194214
## Methods
195215

@@ -212,23 +232,29 @@ Arguments: None
212232

213233
Show the datepicker.
214234

215-
$('#datepicker').datepicker('show');
235+
```javascript
236+
$('#datepicker').datepicker('show');
237+
```
216238

217239
### hide
218240

219241
Arguments: None
220242

221243
Hide the datepicker.
222244

223-
$('#datepicker').datepicker('hide');
245+
```javascript
246+
$('#datepicker').datepicker('hide');
247+
```
224248

225249
### update
226250

227251
Arguments: None
228252

229253
Update the datepicker with the current input value.
230254

231-
$('#datepicker').datepicker('update');
255+
```javascript
256+
$('#datepicker').datepicker('update');
257+
```
232258

233259
### setStartDate
234260

@@ -238,12 +264,16 @@ Arguments:
238264

239265
Sets a new lower date limit on the datepicker.
240266

241-
$('#datepicker').datepicker('setStartDate', '2012-01-01');
267+
```javascript
268+
$('#datepicker').datepicker('setStartDate', '2012-01-01');
269+
```
242270

243271
Omit startDate (or provide an otherwise falsey value) to unset the limit.
244272

245-
$('#datepicker').datepicker('setStartDate');
246-
$('#datepicker').datepicker('setStartDate', null);
273+
```javascript
274+
$('#datepicker').datepicker('setStartDate');
275+
$('#datepicker').datepicker('setStartDate', null);
276+
```
247277

248278
### setEndDate
249279

@@ -253,12 +283,16 @@ Arguments:
253283

254284
Sets a new upper date limit on the datepicker.
255285

256-
$('#datepicker').datepicker('setEndDate', '2012-12-31');
286+
```javascript
287+
$('#datepicker').datepicker('setEndDate', '2012-12-31');
288+
```
257289

258290
Omit endDate (or provide an otherwise falsey value) to unset the limit.
259291

260-
$('#datepicker').datepicker('setEndDate');
261-
$('#datepicker').datepicker('setEndDate', null);
292+
```javascript
293+
$('#datepicker').datepicker('setEndDate');
294+
$('#datepicker').datepicker('setEndDate', null);
295+
```
262296

263297
### setDaysOfWeekDisabled
264298

@@ -268,12 +302,16 @@ Arguments:
268302

269303
Sets the days of week that should be disabled.
270304

271-
$('#datepicker').datepicker('setDaysOfWeekDisabled', [0,6]);
305+
```javascript
306+
$('#datepicker').datepicker('setDaysOfWeekDisabled', [0,6]);
307+
```
272308

273309
Omit daysOfWeekDisabled (or provide an otherwise falsey value) to unset the disabled days.
274310

275-
$('#datepicker').datepicker('setDaysOfWeekDisabled');
276-
$('#datepicker').datepicker('setDaysOfWeekDisabled', null);
311+
```javascript
312+
$('#datepicker').datepicker('setDaysOfWeekDisabled');
313+
$('#datepicker').datepicker('setDaysOfWeekDisabled', null);
314+
```
277315

278316
## Events
279317

@@ -291,13 +329,15 @@ Fired when the date picker is hidden.
291329

292330
Fired when the date is changed.
293331

294-
$('#date-end')
295-
.datepicker()
296-
.on('changeDate', function(ev){
297-
if (ev.date.valueOf() < date-start-display.valueOf()){
298-
....
299-
}
300-
});
332+
```javascript
333+
$('#date-end')
334+
.datepicker()
335+
.on('changeDate', function(ev){
336+
if (ev.date.valueOf() < date-start-display.valueOf()){
337+
....
338+
}
339+
});
340+
```
301341

302342
### changeYear
303343

@@ -333,15 +373,19 @@ When the picker is visible, enter will simply hide it. When the picker is not v
333373

334374
The plugin supports i18n for the month and weekday names and the `weekStart` option. The default is English ('en'); other available translations are avilable in the `js/locales/` directory, simply include your desired locale after the plugin. To add more languages, simply add a key to `$.fn.datepicker.dates`, before calling `.datepicker()`. Example:
335375

336-
$.fn.datepicker.dates['en'] = {
337-
days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
338-
daysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
339-
daysMin: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"],
340-
months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
341-
monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
342-
today: "Today"
343-
};
376+
```javascript
377+
$.fn.datepicker.dates['en'] = {
378+
days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
379+
daysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
380+
daysMin: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"],
381+
months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
382+
monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
383+
today: "Today"
384+
};
385+
```
344386

345387
If your browser (or those of your users) is displaying characters wrong, chances are the browser is loading the javascript file with a non-unicode encoding. Simply add `charset="UTF-8"` to your `script` tag:
346388

347-
<script type="text/javascript" src="bootstrap-datepicker.de.js" charset="UTF-8"></script>
389+
```html
390+
<script type="text/javascript" src="bootstrap-datepicker.de.js" charset="UTF-8"></script>
391+
```

0 commit comments

Comments
 (0)