Skip to content

Commit e33e670

Browse files
dalelottsdalelotts
committed
docs(readme): document how to use jquery 3 with bootstrap dropdowns
Also updated project dependencies to use jQuery 3 and updated related tests
1 parent 3a671ef commit e33e670

File tree

4 files changed

+81
-38
lines changed

4 files changed

+81
-38
lines changed

‎README.md‎

Lines changed: 50 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@ Native AngularJS datetime picker directive styled by Twitter Bootstrap 3
1717
<img src="http://jpillora.com/github-twitter-button/img/tweet.png"></img>
1818
</a>
1919

20-
2120
[Home / demo page](http://dalelotts.github.io/angular-bootstrap-datetimepicker/)
2221

2322
## Support the project
@@ -57,6 +56,50 @@ bower.json file to allow wiredep to use this directive.
5756
}
5857
```
5958

59+
# Bootstrap Dropdown with JQuery 3
60+
61+
If you see this error: `Uncaught Error: Syntax error, unrecognized expression: #`, it is because you are using Bootstrap
62+
dropdown's with JQuery 3 and the HTML from the the official Bootstrap documentation.
63+
64+
Fortunately, you can get Bootstrap dropdowns to work with JQuery 3 by making a minor change to the HTML!
65+
66+
## Bootstrap dropdown using jQuery 2
67+
This example will not work with will not work with jQuery3.
68+
```html
69+
<div class="dropdown">
70+
<a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="#">
71+
Click here to show calendar
72+
</a>
73+
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
74+
<datetimepicker data-ng-model="data.date"
75+
data-datetimepicker-config="{ dropdownSelector: '.dropdown-toggle' }"></datetimepicker>
76+
</ul>
77+
</div>
78+
```
79+
80+
## Bootstrap dropdown using jQuery 3
81+
To use jQuery 3 with Bootstrap 3, you need to change the `data-toggle` to a selector that will select the parent `div.dropdown` element.
82+
83+
If you only have one drop down on the page, the change is very simple.
84+
1. Change `data-toggle="#"` to `data-toggle=".dropdown"`.
85+
86+
To support multiple drop down's on a page, you need to make two changes:
87+
1. Add a new class to the `div.dropdown` element (`dropdown1-parent` in the below example). This will be used as a selector in the `data-target` attribute.
88+
2. Change `data-toggle="#"` to `data-target=".dropdown1-parent" `.
89+
90+
```html
91+
<div class="dropdown dropdown1-parent">
92+
<a class="dropdown-toggle" id="dropdown1" role="button" data-toggle="dropdown" data-target=".dropdown1-parent" href="#">
93+
Click here to show calendar
94+
</a>
95+
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
96+
<datetimepicker data-ng-model="data.date"
97+
data-datetimepicker-config="{ dropdownSelector: '.dropdown-toggle' }"></datetimepicker>
98+
</ul>
99+
</div>
100+
```
101+
**NB**: All examples in this project now use the jQuery 3 HMTL because it also works with jQuery 2.
102+
60103
# Dependencies
61104

62105
Requires:
@@ -308,7 +351,7 @@ Display formatting of the date field is controlled by Angular filters.
308351

309352
```html
310353
<div class="dropdown">
311-
<a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="">
354+
<a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target=".dropdown" href="#">
312355
Click here to show calendar
313356
</a>
314357
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
@@ -324,7 +367,7 @@ the drop-down is toggled closed after the user selects a date/time.
324367
### Drop-down component with associated input box.
325368
```html
326369
<div class="dropdown">
327-
<a class="dropdown-toggle" id="dropdown" role="button" data-toggle="dropdown" data-target="#" href="#">
370+
<a class="dropdown-toggle" id="dropdown" role="button" data-toggle="dropdown" data-target=".dropdown" href="#">
328371
<div class="input-group">
329372
<input type="text" id="date" name="date" class="form-control" data-ng-model="data.date">
330373
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
@@ -363,9 +406,9 @@ $scope.startDateBeforeRender = function($dates) {
363406

364407
### Create a date range picker with validation controls
365408
```html
366-
<div class="dropdown form-group">
409+
<div class="dropdown form-group dropdown-start-parent">
367410
<label>Start Date</label>
368-
<a class="dropdown-toggle" id="dropdownStart" role="button" data-toggle="dropdown" data-target="#"
411+
<a class="dropdown-toggle" id="dropdownStart" role="button" data-toggle="dropdown" data-target=".dropdown-start-parent"
369412
href="#">
370413
<div class="input-group date">
371414
<input type="text" class="form-control" data-ng-model="dateRangeStart">
@@ -380,9 +423,9 @@ $scope.startDateBeforeRender = function($dates) {
380423
</ul>
381424
</div>
382425

383-
<div class="dropdown form-group">
426+
<div class="dropdown form-group dropdown-end-parent">
384427
<label>End Date</label>
385-
<a class="dropdown-toggle" id="dropdownEnd" role="button" data-toggle="dropdown" data-target="#"
428+
<a class="dropdown-toggle" id="dropdownEnd" role="button" data-toggle="dropdown" data-target=".dropdown-end-parent"
386429
href="#">
387430
<div class="input-group date">
388431
<input type="text" class="form-control" data-ng-model="dateRangeEnd">

‎demo/index.html‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -58,8 +58,8 @@ <h4>No formatting</h4>
5858
<div class="well">
5959
<p>Formatted Date: {{ data.dateDropDownInputNoFormatting | date:'medium' }}</p>
6060

61-
<div class="dropdown">
62-
<a class="dropdown-toggle" id="dropdown1" role="button" data-toggle="dropdown" data-target="#"
61+
<div class="dropdown dropdown1-parent">
62+
<a class="dropdown-toggle" id="dropdown1" role="button" data-toggle="dropdown" data-target=".dropdown1-parent"
6363
href="#">
6464
<div class="input-group">
6565
<input type="text" class="form-control" data-ng-model="data.dateDropDownInputNoFormatting">
@@ -87,8 +87,8 @@ <h4>Localized formatting using <a href="https://github.com/dalelotts/angular-dat
8787
<div class="well">
8888
<p>Formatted Date: {{ data.dateDropDownInput | date:'medium' }}</p>
8989

90-
<div class="dropdown">
91-
<a class="dropdown-toggle" id="dropdown2" role="button" data-toggle="dropdown" data-target="#"
90+
<div class="dropdown dropdown2-parent">
91+
<a class="dropdown-toggle" id="dropdown2" role="button" data-toggle="dropdown" data-target=".dropdown2-parent"
9292
href="#">
9393
<div class="input-group">
9494
<input type="text" class="form-control" data-ng-model="data.dateDropDownInput"
@@ -116,8 +116,8 @@ <h3>Drop-down Datetime with input box</h3>
116116
<div class="well">
117117
<p>Formatted Date: {{ data.inputOnTimeSet | date:'medium' }}</p>
118118

119-
<div class="dropdown">
120-
<a class="dropdown-toggle" id="dropdown3" role="button" data-toggle="dropdown" data-target="#"
119+
<div class="dropdown dropdown3-parent">
120+
<a class="dropdown-toggle" id="dropdown3" role="button" data-toggle="dropdown" data-target=".dropdown3-parent"
121121
href="#">
122122
<div class="input-group">
123123
<input type="text" class="form-control" data-ng-model="data.inputOnTimeSet">
@@ -161,8 +161,8 @@ <h3>Drop-down Datetime form integration</h3>
161161
</button>
162162
</p>
163163

164-
<div class="dropdown">
165-
<a class="dropdown-toggle" id="dropdown4" role="button" data-toggle="dropdown" data-target="#"
164+
<div class="dropdown dropdown4-parent">
165+
<a class="dropdown-toggle" id="dropdown4" role="button" data-toggle="dropdown" data-target=".dropdown4-parent"
166166
href="#">
167167
<div class="input-group">
168168
<input type="text" class="form-control" name="formDateValue" data-ng-required="true"
@@ -190,8 +190,8 @@ <h3>Drop-down using text link</h3>
190190
<div class="well">
191191
<p>Formatted Date: {{ data.linkCalendar | date:'medium' }}</p>
192192

193-
<div class="dropdown">
194-
<a class="dropdown-toggle" id="dropdown5" role="button" data-toggle="dropdown" data-target="#"
193+
<div class="dropdown dropdown5-parent">
194+
<a class="dropdown-toggle" id="dropdown5" role="button" data-toggle="dropdown" data-target=".dropdown5-parent"
195195
href="#">
196196
Click here to show calendar
197197
</a>
@@ -309,9 +309,9 @@ <h3>ng-repeat with drop-down using text link</h3>
309309

310310
<p>DOB: {{ guardian.dob | date:'yyyy-MM-dd' }} </p>
311311

312-
<div class="dropdown">
312+
<div class="dropdown dropdown-repeat-parent">
313313
<a class="dropdown-toggle" id="guardian{{ $index }}" role="button" data-toggle="dropdown"
314-
data-target="#"
314+
data-target=".dropdown-repeat-parent"
315315
href="#">
316316
Click here to show calendar
317317
</a>
@@ -332,8 +332,8 @@ <h4>One date - somewhere near the middle of the display - is disabled on each vi
332332
<div class="well">
333333
<p>Formatted Date: {{ data.dateDropDownInputNoFormatting | date:'medium' }}</p>
334334

335-
<div class="dropdown">
336-
<a class="dropdown-toggle" id="dropdown6" role="button" data-toggle="dropdown" data-target="#"
335+
<div class="dropdown dropdown6-parent">
336+
<a class="dropdown-toggle" id="dropdown6" role="button" data-toggle="dropdown" data-target=".dropdown6-parent"
337337
href="#">
338338
<div class="input-group">
339339
<input type="text" class="form-control" data-ng-model="data.dateDropDownInputNoFormatting">
@@ -412,9 +412,9 @@ <h4>Every time you select a start date, dates before the start date are disabled
412412
</p>
413413

414414
<div class="well">
415-
<div class="dropdown form-group">
415+
<div class="dropdown form-group dropdown-start-parent">
416416
<label>Start Date</label>
417-
<a class="dropdown-toggle" id="dropdownStart" role="button" data-toggle="dropdown" data-target="#"
417+
<a class="dropdown-toggle" id="dropdownStart" role="button" data-toggle="dropdown" data-target=".dropdown-start-parent"
418418
href="#">
419419
<div class="input-group date">
420420
<input type="text" class="form-control" data-ng-model="dateRangeStart">
@@ -429,9 +429,9 @@ <h4>Every time you select a start date, dates before the start date are disabled
429429
</ul>
430430
</div>
431431

432-
<div class="dropdown form-group">
432+
<div class="dropdown form-group dropdown-end-parent">
433433
<label>End Date</label>
434-
<a class="dropdown-toggle" id="dropdownEnd" role="button" data-toggle="dropdown" data-target="#"
434+
<a class="dropdown-toggle" id="dropdownEnd" role="button" data-toggle="dropdown" data-target=".dropdown-end-parent"
435435
href="#">
436436
<div class="input-group date">
437437
<input type="text" class="form-control" data-ng-model="dateRangeEnd">

‎package.json‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -22,21 +22,21 @@
2222
"style": "src/css/datetimepicker.css",
2323
"scss": "src/scss/datetimepicker.scss",
2424
"dependencies": {
25-
"angular": "^1.6.3",
25+
"angular": "^1.6.4",
2626
"moment": "^2.18.1"
2727
},
2828
"devDependencies": {
2929
"angular-date-time-input": "^1.2.1",
30-
"angular-mocks": "^1.6.3",
30+
"angular-mocks": "^1.6.4",
3131
"autoprefixer": "^6.7.7",
3232
"bootstrap": "^3.3.7",
3333
"commitizen": "^2.9.6",
34-
"coveralls": "^2.13.0",
34+
"coveralls": "^2.13.1",
3535
"csscomb": "^4.0.1",
3636
"csslint": "^1.0.5",
3737
"cz-conventional-changelog": "^2.0.0",
3838
"del": "^2.2.2",
39-
"eslint": "^3.18.0",
39+
"eslint": "^3.19.0",
4040
"gulp": "^3.9.1",
4141
"gulp-angular-templatecache": "^2.0.0",
4242
"gulp-csscomb": "^3.0.8",
@@ -48,14 +48,14 @@
4848
"gulp-sass": "^3.1.0",
4949
"gulp-scss-lint": "^0.4.0",
5050
"gulp-scss-lint-stylish": "^1.0.1",
51-
"gulp-sourcemaps": "^2.5.0",
52-
"gulp-standard": "^9.0.0",
51+
"gulp-sourcemaps": "^2.6.0",
52+
"gulp-standard": "^10.0.0",
5353
"gulp-stylelint": "^3.9.0",
54-
"jasmine-core": "^2.5.2",
55-
"jquery": "^2.2.4",
54+
"jasmine-core": "^2.6.1",
55+
"jquery": "^3.2.1",
5656
"jshint": "^2.9.4",
5757
"jshint-stylish": "^2.2.1",
58-
"karma": "^1.5.0",
58+
"karma": "^1.6.0",
5959
"karma-chrome-launcher": "^2.0.0",
6060
"karma-coverage": "^1.1.1",
6161
"karma-firefox-launcher": "^1.0.1",
@@ -65,15 +65,15 @@
6565
"karma-webpack": "^2.0.3",
6666
"lodash": "^4.17.4",
6767
"matchdep": "^1.0.1",
68-
"moment-timezone": "^0.5.11",
68+
"moment-timezone": "^0.5.13",
6969
"phantomjs-prebuilt": "^2.1.14",
7070
"plato": "^1.7.0",
7171
"run-browser": "^2.0.2",
7272
"semantic-release": "^6.3.2",
73-
"standard": "^9.0.2",
73+
"standard": "^10.0.2",
7474
"stylelint-config-standard": "^16.0.0",
7575
"tape": "^4.6.3",
76-
"webpack": "^2.3.2"
76+
"webpack": "^2.4.1"
7777
},
7878
"scripts": {
7979
"coverage:upload": "cat build/coverage/lcov.info | coveralls",

‎test/configuration/dropdownSelector.spec.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ describe('dropdownSelector', function () {
4545
})
4646
it('and calls bootstrap methods', function () {
4747
var html = '<div class="dropdown">' +
48-
'<a class="dropdown-toggle" id="dropdown" role="button" data-toggle="dropdown" data-target="#" href="#">' +
48+
'<a class="dropdown-toggle" id="dropdown" role="button" data-toggle="dropdown" data-target=".dropdown" href="#">' +
4949
' <div class="input-group">' +
5050
' <input type="text" class="form-control" data-ng-model="data.dateDropDownInputNoFormatting">' +
5151
' <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>' +

0 commit comments

Comments
 (0)