Skip to content

Commit 6cb036f

Browse files
technikhil314technikhil314
committedNov 13, 2020
chore: Multiple changes in one commit
Bad but I am lazy to split the files now Changes: Added theme support Added custom css flex everywhere - removed bootstrap dependancy Added several css variables for better support Added several aria-label and titles to make it more accessible Handeling keypress event on main input box for accessibility Added all corresponding markdown documentation changes Added corresponding demo to app too
·
testing-release-0angular-datetimerangepicker@2.1.0
1 parent 433de78 commit 6cb036f

15 files changed

+397
-1179
lines changed
 

Diff for: ‎.vscode/launch.json

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
// Use IntelliSense to learn about possible attributes.
3+
// Hover to view descriptions of existing attributes.
4+
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
5+
"version": "0.2.0",
6+
"configurations": [
7+
{
8+
"type": "chrome",
9+
"request": "launch",
10+
"name": "Launch Chrome against localhost",
11+
"url": "http://localhost:4200",
12+
"webRoot": "${workspaceFolder}"
13+
}
14+
]
15+
}

Diff for: ‎angular.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
],
2525
"styles": [
2626
"src/styles.css",
27-
"projects/angular-datetimerangepicker/src/styles/with-bootstrap.css"
27+
"projects/angular-datetimerangepicker/src/styles/styles.css"
2828
],
2929
"scripts": []
3030
},

Diff for: ‎projects/angular-datetimerangepicker/README.md

+15-8
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,11 @@ No offence here. These are good libraries but with modern frameworks they add mo
6363

6464
## Announcements
6565

66+
- Date: 13th Nov 2020
67+
1. Using modern css (flexbox)
68+
1. Removing dependency on bootstrap (now works without bootstrap too)
69+
1. Adding option for theme
70+
1. Added screen reader and keyboard accessibility
6671
- Date: 25 Oct 2020
6772
1. Removed momentjs now using [dayjs](https://day.js.org/)
6873
- Date: 17 Oct 2020
@@ -88,7 +93,7 @@ Check the demo [here](https://angular-datetimerangepicker-demo.stackblitz.io)
8893

8994
1. Get rid of moment to minimise the package [:heavy_check_mark:]
9095
1. Make style more robust. Use latest CSS features.
91-
1. Add theme support
96+
1. Add theme support
9297
1. Make touch friendly UI for touch devices
9398

9499
<br/>
@@ -139,17 +144,12 @@ The input box automatically takes class of the daterangepicker tag
139144
140145
### Using Unpkg
141146
142-
If you are already using bootstrap.css then just include the following css in your code
143-
This has minimal set of rules that inherits styles from bootstrap.css <br/>
144-
[https://unpkg.com/angular-datetimerangepicker/styles/with-bootstrap.css](https://unpkg.com/angular-datetimerangepicker/styles/with-bootstrap.css)
145-
146-
if you do not want to include whole bootstrap.css then include following css in your code. <br/>
147-
[https://unpkg.com/angular-datetimerangepicker/styles/without-bootstrap.css](https://unpkg.com/angular-datetimerangepicker/styles/without-bootstrap.css)
147+
[https://unpkg.com/angular-datetimerangepicker/styles/styles.css](https://unpkg.com/angular-datetimerangepicker/styles/styles.css)
148148
149149
### from node_modules
150150
151151
add following path to `angular.json`'s style section if you are already using bootstrap <br/>
152-
`./node_modules/angular-datetimerangepicker/styles/with-bootstrap.css`
152+
`./node_modules/angular-datetimerangepicker/styles/styles.css`
153153
154154
or add following path to `angular.json`'s style section if you dont want bootstrap <br/>
155155
`./node_modules/angular-datetimerangepicker/styles/without-bootstrap.css`
@@ -291,6 +291,13 @@ Currently, these options are available but I will keep on developing and adding
291291
<td>'left'</td>
292292
<td>'left','right','center'</td>
293293
</tr>
294+
<tr>
295+
<td>theme</td>
296+
<td>string</td>
297+
<td>theme for overall component</td>
298+
<td>'light'</td>
299+
<td>'light','dark'</td>
300+
</tr>
294301
<tr>
295302
<td>disabled</td>
296303
<td>boolean</td>

Diff for: ‎projects/angular-datetimerangepicker/src/calendar/calendar-component.html

+22-32
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,24 @@
1-
<div class="col-md-12 text-center bootstrap-flush push-bottom">
2-
<span class="col-md-2 nudge-top">
3-
<span class="col-md-6 flush clickable clickable-link" (click)="yearSelected(-1)">
4-
<img
5-
src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA0MDcuNDM2IDQwNy40MzYiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQwNy40MzYgNDA3LjQzNjsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSIxNnB4IiBoZWlnaHQ9IjE2cHgiPgo8Zz4KCTxwb2x5Z29uIHBvaW50cz0iMjY2LjQ1MiwyMS4xNzggMjQ1LjIwNCwwIDQyLjE0OSwyMDMuNzE4IDI0NS4yMDQsNDA3LjQzNiAyNjYuNDUyLDM4Ni4yNTggODQuNTA3LDIwMy43MTggICIgZmlsbD0iIzAwMDAwMCIvPgoJPHBvbHlnb24gcG9pbnRzPSIzNjUuMjg2LDIxLjE3OCAzNDQuMDM4LDAgMTQwLjk4MywyMDMuNzE4IDM0NC4wMzgsNDA3LjQzNiAzNjUuMjg2LDM4Ni4yNTggMTgzLjM0MSwyMDMuNzE4ICAiIGZpbGw9IiMwMDAwMDAiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K" />
6-
</span>
7-
</span>
8-
<span class="col-md-2 nudge-top">
9-
<span class="col-md-6 flush clickable clickable-link" (click)="monthSelected(-1)">
10-
<img
11-
src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDQ0NC41MzEgNDQ0LjUzMSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDQ0LjUzMSA0NDQuNTMxOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggZD0iTTIxMy4xMywyMjIuNDA5TDM1MS44OCw4My42NTNjNy4wNS03LjA0MywxMC41NjctMTUuNjU3LDEwLjU2Ny0yNS44NDFjMC0xMC4xODMtMy41MTgtMTguNzkzLTEwLjU2Ny0yNS44MzUgICBsLTIxLjQwOS0yMS40MTZDMzIzLjQzMiwzLjUyMSwzMTQuODE3LDAsMzA0LjYzNywwcy0xOC43OTEsMy41MjEtMjUuODQxLDEwLjU2MUw5Mi42NDksMTk2LjQyNSAgIGMtNy4wNDQsNy4wNDMtMTAuNTY2LDE1LjY1Ni0xMC41NjYsMjUuODQxczMuNTIxLDE4Ljc5MSwxMC41NjYsMjUuODM3bDE4Ni4xNDYsMTg1Ljg2NGM3LjA1LDcuMDQzLDE1LjY2LDEwLjU2NCwyNS44NDEsMTAuNTY0ICAgczE4Ljc5NS0zLjUyMSwyNS44MzQtMTAuNTY0bDIxLjQwOS0yMS40MTJjNy4wNS03LjAzOSwxMC41NjctMTUuNjA0LDEwLjU2Ny0yNS42OTdjMC0xMC4wODUtMy41MTgtMTguNzQ2LTEwLjU2Ny0yNS45NzggICBMMjEzLjEzLDIyMi40MDl6IiBmaWxsPSIjMDAwMDAwIi8+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==" />
12-
</span>
13-
</span>
14-
<span class="col-md-4 float-left text-center nudge-top flush-left flush-right">
15-
<label> {{monthText}} {{year}} </label>
16-
</span>
17-
<span class="col-md-2 nudge-top">
18-
<span class="col-md-6 pull-right flush clickable clickable-link" (click)="monthSelected(1)">
19-
<img
20-
src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDQ0NC44MTkgNDQ0LjgxOSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDQ0LjgxOSA0NDQuODE5OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggZD0iTTM1Mi4wMjUsMTk2LjcxMkwxNjUuODg0LDEwLjg0OEMxNTkuMDI5LDMuNjE1LDE1MC40NjksMCwxNDAuMTg3LDBjLTEwLjI4MiwwLTE4Ljg0MiwzLjYxOS0yNS42OTcsMTAuODQ4TDkyLjc5MiwzMi4yNjQgICBjLTcuMDQ0LDcuMDQzLTEwLjU2NiwxNS42MDQtMTAuNTY2LDI1LjY5MmMwLDkuODk3LDMuNTIxLDE4LjU2LDEwLjU2NiwyNS45ODFsMTM4Ljc1MywxMzguNDczTDkyLjc4NiwzNjEuMTY4ICAgYy03LjA0Miw3LjA0My0xMC41NjQsMTUuNjA0LTEwLjU2NCwyNS42OTNjMCw5Ljg5NiwzLjUyMSwxOC41NjIsMTAuNTY0LDI1Ljk4bDIxLjcsMjEuNDEzICAgYzcuMDQzLDcuMDQzLDE1LjYxMiwxMC41NjQsMjUuNjk3LDEwLjU2NGMxMC4wODksMCwxOC42NTYtMy41MjEsMjUuNjk3LTEwLjU2NGwxODYuMTQ1LTE4NS44NjQgICBjNy4wNDYtNy40MjMsMTAuNTcxLTE2LjA4NCwxMC41NzEtMjUuOTgxQzM2Mi41OTcsMjEyLjMyMSwzNTkuMDcxLDIwMy43NTUsMzUyLjAyNSwxOTYuNzEyeiIgZmlsbD0iIzAwMDAwMCIvPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=" />
21-
</span>
22-
</span>
23-
<span class="col-md-2 nudge-top flush-right">
24-
<span class="col-md-6 flush clickable clickable-link" (click)="yearSelected(1)">
25-
<img
26-
src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA0MDcuNDM2IDQwNy40MzYiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQwNy40MzYgNDA3LjQzNjsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSIxNnB4IiBoZWlnaHQ9IjE2cHgiPgo8Zz4KCTxwb2x5Z29uIHBvaW50cz0iMTYyLjIzMSwwIDE0MC45ODMsMjEuMTc4IDMyMi45MjksMjAzLjcxOCAxNDAuOTgzLDM4Ni4yNTggMTYyLjIzMSw0MDcuNDM2IDM2NS4yODYsMjAzLjcxOCAgIiBmaWxsPSIjMDAwMDAwIi8+Cgk8cG9seWdvbiBwb2ludHM9IjYzLjM5NywwIDQyLjE0OSwyMS4xNzggMjI0LjA5NSwyMDMuNzE4IDQyLjE0OSwzODYuMjU4IDYzLjM5Nyw0MDcuNDM2IDI2Ni40NTIsMjAzLjcxOCAgIiBmaWxsPSIjMDAwMDAwIi8+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==" />
27-
</span>
28-
</span>
1+
<div class="drp-flex drp-space-around">
2+
<button class="drp-btn" (click)="yearSelected(-1)" title="Previous year" aria-label="Previous year">
3+
<img
4+
src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA0MDcuNDM2IDQwNy40MzYiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQwNy40MzYgNDA3LjQzNjsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSIxNnB4IiBoZWlnaHQ9IjE2cHgiPgo8Zz4KCTxwb2x5Z29uIHBvaW50cz0iMjY2LjQ1MiwyMS4xNzggMjQ1LjIwNCwwIDQyLjE0OSwyMDMuNzE4IDI0NS4yMDQsNDA3LjQzNiAyNjYuNDUyLDM4Ni4yNTggODQuNTA3LDIwMy43MTggICIgZmlsbD0iIzAwMDAwMCIvPgoJPHBvbHlnb24gcG9pbnRzPSIzNjUuMjg2LDIxLjE3OCAzNDQuMDM4LDAgMTQwLjk4MywyMDMuNzE4IDM0NC4wMzgsNDA3LjQzNiAzNjUuMjg2LDM4Ni4yNTggMTgzLjM0MSwyMDMuNzE4ICAiIGZpbGw9IiMwMDAwMDAiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K" />
5+
</button>
6+
<button class="drp-btn" (click)="monthSelected(-1)" title="Previous month" aria-label="Previous month">
7+
<img
8+
src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDQ0NC41MzEgNDQ0LjUzMSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDQ0LjUzMSA0NDQuNTMxOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggZD0iTTIxMy4xMywyMjIuNDA5TDM1MS44OCw4My42NTNjNy4wNS03LjA0MywxMC41NjctMTUuNjU3LDEwLjU2Ny0yNS44NDFjMC0xMC4xODMtMy41MTgtMTguNzkzLTEwLjU2Ny0yNS44MzUgICBsLTIxLjQwOS0yMS40MTZDMzIzLjQzMiwzLjUyMSwzMTQuODE3LDAsMzA0LjYzNywwcy0xOC43OTEsMy41MjEtMjUuODQxLDEwLjU2MUw5Mi42NDksMTk2LjQyNSAgIGMtNy4wNDQsNy4wNDMtMTAuNTY2LDE1LjY1Ni0xMC41NjYsMjUuODQxczMuNTIxLDE4Ljc5MSwxMC41NjYsMjUuODM3bDE4Ni4xNDYsMTg1Ljg2NGM3LjA1LDcuMDQzLDE1LjY2LDEwLjU2NCwyNS44NDEsMTAuNTY0ICAgczE4Ljc5NS0zLjUyMSwyNS44MzQtMTAuNTY0bDIxLjQwOS0yMS40MTJjNy4wNS03LjAzOSwxMC41NjctMTUuNjA0LDEwLjU2Ny0yNS42OTdjMC0xMC4wODUtMy41MTgtMTguNzQ2LTEwLjU2Ny0yNS45NzggICBMMjEzLjEzLDIyMi40MDl6IiBmaWxsPSIjMDAwMDAwIi8+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==" />
9+
</button>
10+
<label class="mb-0"> {{monthText}} {{year}} </label>
11+
<button class="drp-btn" (click)="monthSelected(1)" title="Next month" aria-label="Next month">
12+
<img
13+
src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDQ0NC44MTkgNDQ0LjgxOSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDQ0LjgxOSA0NDQuODE5OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggZD0iTTM1Mi4wMjUsMTk2LjcxMkwxNjUuODg0LDEwLjg0OEMxNTkuMDI5LDMuNjE1LDE1MC40NjksMCwxNDAuMTg3LDBjLTEwLjI4MiwwLTE4Ljg0MiwzLjYxOS0yNS42OTcsMTAuODQ4TDkyLjc5MiwzMi4yNjQgICBjLTcuMDQ0LDcuMDQzLTEwLjU2NiwxNS42MDQtMTAuNTY2LDI1LjY5MmMwLDkuODk3LDMuNTIxLDE4LjU2LDEwLjU2NiwyNS45ODFsMTM4Ljc1MywxMzguNDczTDkyLjc4NiwzNjEuMTY4ICAgYy03LjA0Miw3LjA0My0xMC41NjQsMTUuNjA0LTEwLjU2NCwyNS42OTNjMCw5Ljg5NiwzLjUyMSwxOC41NjIsMTAuNTY0LDI1Ljk4bDIxLjcsMjEuNDEzICAgYzcuMDQzLDcuMDQzLDE1LjYxMiwxMC41NjQsMjUuNjk3LDEwLjU2NGMxMC4wODksMCwxOC42NTYtMy41MjEsMjUuNjk3LTEwLjU2NGwxODYuMTQ1LTE4NS44NjQgICBjNy4wNDYtNy40MjMsMTAuNTcxLTE2LjA4NCwxMC41NzEtMjUuOTgxQzM2Mi41OTcsMjEyLjMyMSwzNTkuMDcxLDIwMy43NTUsMzUyLjAyNSwxOTYuNzEyeiIgZmlsbD0iIzAwMDAwMCIvPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=" />
14+
</button>
15+
<button class="drp-btn" (click)="yearSelected(1)" title="Next Year" aria-label="Next Year">
16+
<img
17+
src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA0MDcuNDM2IDQwNy40MzYiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQwNy40MzYgNDA3LjQzNjsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSIxNnB4IiBoZWlnaHQ9IjE2cHgiPgo8Zz4KCTxwb2x5Z29uIHBvaW50cz0iMTYyLjIzMSwwIDE0MC45ODMsMjEuMTc4IDMyMi45MjksMjAzLjcxOCAxNDAuOTgzLDM4Ni4yNTggMTYyLjIzMSw0MDcuNDM2IDM2NS4yODYsMjAzLjcxOCAgIiBmaWxsPSIjMDAwMDAwIi8+Cgk8cG9seWdvbiBwb2ludHM9IjYzLjM5NywwIDQyLjE0OSwyMS4xNzggMjI0LjA5NSwyMDMuNzE4IDQyLjE0OSwzODYuMjU4IDYzLjM5Nyw0MDcuNDM2IDI2Ni40NTIsMjAzLjcxOCAgIiBmaWxsPSIjMDAwMDAwIi8+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==" />
18+
</button>
2919
</div>
30-
<div class="col-md-12 flush">
31-
<table class="table table-condensed flush">
20+
<div class="calendar-grid">
21+
<table>
3222
<thead>
3323
<th>Su</th>
3424
<th>Mo</th>
@@ -40,9 +30,9 @@
4030
</thead>
4131
<tbody>
4232
<tr *ngFor="let week of weekList; let i = index">
43-
<td *ngFor="let day of weekList[i]" (click)="dateSelected(day)" class="clickable"
33+
<td *ngFor="let day of weekList[i]" (click)="dateSelected(day)" class="drp-date"
4434
[ngClass]="{'off':!isDateAvailable(day),'active':isSelectedDate(day),'disabled':isDisabled(day)}">
45-
{{ day.format('D') }}
35+
<button class="drp-btn" [attr.aria-label]="day | formatDate: format">{{ day.format('D') }}</button>
4636
</td>
4737
</tr>
4838
</tbody>

Diff for: ‎projects/angular-datetimerangepicker/src/calendar/calendar-component.ts

+6-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import {
44
Input,
55
OnChanges,
66
Output,
7-
SimpleChanges
7+
SimpleChanges,
88
} from "@angular/core";
99
import calendarize from "calendarize";
1010
declare var require: any;
@@ -114,6 +114,7 @@ export class CalendarComponent implements OnChanges {
114114
return false;
115115
}
116116
if (
117+
!this.singleCalendar &&
117118
this.inactiveBeforeStart &&
118119
day.isBefore(this.selectedFromDate, "date")
119120
) {
@@ -129,13 +130,17 @@ export class CalendarComponent implements OnChanges {
129130
return true;
130131
}
131132
if (
133+
!this.singleCalendar &&
132134
day.get("month") === this.month &&
133135
day.isSameOrAfter(this.selectedFromDate, "date") &&
134136
day.isSameOrBefore(this.selectedToDate, "date")
135137
) {
136138
return true;
137139
}
138140
}
141+
getFormattedDate(day) {
142+
return day.format(this.format);
143+
}
139144
dateSelected(day) {
140145
this.dateChanged.emit({
141146
day: day,

Diff for: ‎projects/angular-datetimerangepicker/src/daterangepicker-options.ts

+1
Original file line numberDiff line numberDiff line change
@@ -31,4 +31,5 @@ export class Options {
3131
timePicker: Timepicker = null;
3232
disableBeforeStart: boolean = false;
3333
alwaysOpen: boolean = false;
34+
theme: string = "light"
3435
}

Diff for: ‎projects/angular-datetimerangepicker/src/daterangepicker/daterangepicker.component.html

+38-48
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,47 @@
1-
<div class="daterangepicker-wrapper">
2-
<input class="{{class}} dateRangePicker-input" type="text" [ngModel]="range" [disabled]="options.disabled"
3-
[ngClass]="{ hidden: options.alwaysOpen }" />
4-
<div class="daterangepicker text-center flush {{getPositionClass()}}" [ngClass]="{
1+
<div class="drp-wrapper" [ngClass]="{dark: getThemeName()}">
2+
<input class="{{class}} drp-input" type="text" [ngModel]="range" [disabled]="options.disabled"
3+
aria-label="Input your date range" [ngClass]="{ hidden: options.alwaysOpen }" />
4+
<div class="drp-flyout {{getPositionClass()}}" [ngClass]="{
55
hidden: !(showCalendars || options.alwaysOpen),
66
singledatepicker: options.singleCalendar,
7-
'tooltip-chevron': !options.alwaysOpen,
8-
'always-open': options.alwaysOpen
7+
tooltipChevron: !options.alwaysOpen,
8+
alwaysOpen: options.alwaysOpen
99
}">
10-
<div class="col-md-12 flush text-center">
11-
<div class="flush-bottom text-center flush-left nudge-half--right" [ngClass]="{
12-
'col-md-6': !options.singleCalendar,
13-
'col-md-12': options.singleCalendar
14-
}">
15-
<div class="col-md-12 flush-bottom" *ngIf="!options.singleCalendar">
16-
<input class="input-mini form-control" [ngModel]="fromDate | formatDate: format"
17-
(blur)="formatFromDate($event)" type="text" name="daterangepicker_start" />
18-
</div>
19-
<div class="col-md-12 flush">
20-
<calendar class="col-md-12 flush" [isLeft]="true" [month]="fromMonth" [year]="fromYear"
21-
(monthChanged)="monthChanged($event)" (yearChanged)="yearChanged($event)"
22-
(dateChanged)="dateChanged($event)" [format]="format" [selectedFromDate]="fromDate"
23-
[selectedToDate]="toDate" [minDate]="options.minDate" [maxDate]="options.maxDate"
24-
[inactiveBeforeStart]="options.inactiveBeforeStart" [disableBeforeStart]="options.disableBeforeStart"
25-
[timePicker]="options.timePicker" [singleCalendar]="options.singleCalendar"></calendar>
26-
</div>
10+
<div class="drp-flex drp-space-around">
11+
<div class="drp-calendar-container">
12+
<input class="drp-calendar-input" [ngModel]="fromDate | formatDate: format" (blur)="formatFromDate($event)"
13+
readonly type="text" name="daterangepicker_start" />
14+
<calendar class="calender" [isLeft]="true" [month]="fromMonth" [year]="fromYear"
15+
(monthChanged)="monthChanged($event)" (yearChanged)="yearChanged($event)" (dateChanged)="dateChanged($event)"
16+
[format]="format" [selectedFromDate]="fromDate" [selectedToDate]="toDate" [minDate]="options.minDate"
17+
[maxDate]="options.maxDate" [inactiveBeforeStart]="options.inactiveBeforeStart"
18+
[disableBeforeStart]="options.disableBeforeStart" [timePicker]="options.timePicker"
19+
[singleCalendar]="options.singleCalendar"></calendar>
2720
</div>
28-
<div class="col-md-6 flush-bottom flush-right nudge-half--left" *ngIf="!options.singleCalendar">
29-
<div class="col-md-12 flush-bottom text-center">
30-
<input class="input-mini form-control" [ngModel]="toDate | formatDate: format"
31-
(blur)="formatToDate($event)" name="daterangepicker_end" />
32-
</div>
33-
<div class="col-md-12 flush">
34-
<calendar class="col-md-12 flush" [month]="toMonth" [year]="toYear" [format]="format"
35-
(dateChanged)="dateChanged($event)" (monthChanged)="monthChanged($event)"
36-
(yearChanged)="yearChanged($event)" [selectedFromDate]="fromDate" [selectedToDate]="toDate"
37-
[minDate]="options.minDate" [maxDate]="options.maxDate" [inactiveBeforeStart]="options.inactiveBeforeStart"
38-
[disableBeforeStart]="options.disableBeforeStart" [timePicker]="options.timePicker"></calendar>
39-
</div>
21+
<div class="drp-calendar-container" *ngIf="!options.singleCalendar">
22+
<input class="drp-calendar-input" [ngModel]="toDate | formatDate: format" (blur)="formatToDate($event)" readonly
23+
name="daterangepicker_end" />
24+
<calendar class="calender" [month]="toMonth" [year]="toYear" [format]="format"
25+
(dateChanged)="dateChanged($event)" (monthChanged)="monthChanged($event)" (yearChanged)="yearChanged($event)"
26+
[selectedFromDate]="fromDate" [selectedToDate]="toDate" [minDate]="options.minDate"
27+
[maxDate]="options.maxDate" [inactiveBeforeStart]="options.inactiveBeforeStart"
28+
[disableBeforeStart]="options.disableBeforeStart" [timePicker]="options.timePicker"></calendar>
4029
</div>
4130
</div>
42-
<div class="text-center ranges">
43-
<button [class.hidden]="isAutoApply()" class="btn btn-success btn-sm" [disabled]="!enableApplyButton"
44-
(click)="apply()" type="button">
45-
Apply
46-
</button>
47-
<button [class.hidden]="isAutoApply()" class="btn btn-default btn-sm" (click)="cancel()" type="button">
48-
Cancel
49-
</button>
50-
<button [disabled]="!this.range" class="btn btn-default btn-link" (click)="clear()" type="button">
51-
Clear
52-
</button>
53-
<div class="flush text-center" *ngIf="options.showRanges && !options.singleCalendar">
54-
<button *ngFor="let range of defaultRanges" class="btn btn-link" (click)="applyPredefinedRange(range)"
31+
<div class="my-0">
32+
<div class="drp-flex"><button [class.hidden]="isAutoApply()" class="drp-control apply"
33+
[disabled]="!enableApplyButton" (click)="apply()" type="button">
34+
Apply
35+
</button>
36+
<button [class.hidden]="isAutoApply()" class="drp-control cancel" (click)="cancel()" type="button">
37+
Cancel
38+
</button>
39+
<button [disabled]="!this.range" class="drp-control drp-btn drp-link" (click)="clear()" type="button">
40+
Clear
41+
</button>
42+
</div>
43+
<div class="drp-flex" *ngIf="options.showRanges && !options.singleCalendar">
44+
<button *ngFor="let range of defaultRanges" class="drp-btn drp-link" (click)="applyPredefinedRange(range)"
5545
type="button">
5646
{{ range.name }}
5747
</button>

Diff for: ‎projects/angular-datetimerangepicker/src/daterangepicker/daterangepicker.component.ts

+4
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ export class DaterangepickerComponent implements OnInit {
4343
//handle outside/inside click to show rangepicker
4444
@HostListener("document:mousedown", ["$event"])
4545
@HostListener("document:mouseup", ["$event"])
46+
@HostListener("document:keyup", ["$event"])
4647
handleOutsideClick(event) {
4748
if (!this.options.disabled) {
4849
let current: any = event.target;
@@ -78,6 +79,9 @@ export class DaterangepickerComponent implements OnInit {
7879
}
7980
}
8081
constructor(private elem: ElementRef) {}
82+
getThemeName() {
83+
return this.options.theme === "dark";
84+
}
8185
toggleCalendars(value) {
8286
this.showCalendars = value;
8387
if (!value) {

Diff for: ‎projects/angular-datetimerangepicker/src/styles/styles.css

+237
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,237 @@
1+
.drp-wrapper {
2+
--drp-input-height: 33px;
3+
--drp-input-border-radius: 4px;
4+
--drp-background: hsla(0, 0%, 98%);
5+
--drp-foreground: hsla(0, 0%, 20%);
6+
--drp-hover-color: hsla(0, 50%, 90%);
7+
--drp-shadow-color: rgba(0, 0, 0, 0.2);
8+
--drp-flyout-width: 500px;
9+
--drp-link-color: hsl(240deg, 50%, 55%);
10+
--drp-flyout-single-calendar-width: 250px;
11+
--drp-input-border-color: #666;
12+
--drp-input-disabled-color: #dedede;
13+
position: relative;
14+
border: none;
15+
}
16+
17+
.drp-wrapper.dark {
18+
filter: invert(1) hue-rotate(180deg);
19+
}
20+
21+
/* all input boxes */
22+
23+
.drp-input,
24+
.drp-calendar-input {
25+
padding: 0px 10px;
26+
height: var(--drp-input-height);
27+
width: 100%;
28+
box-sizing: border-box;
29+
border-radius: var(--drp-input-border-radius);
30+
border: 1px solid var(--drp-input-border-color);
31+
cursor: text;
32+
background: var(--drp-background);
33+
color: var(--drp-foreground);
34+
}
35+
36+
.drp-calendar-input[readonly],
37+
.drp-input[readonly],
38+
.drp-calendar-input[disabled],
39+
.drp-input[disabled] {
40+
opacity: 0.7;
41+
background: var(--drp-input-disabled-color);
42+
cursor: not-allowed;
43+
}
44+
45+
/* the flyout/popup */
46+
47+
.drp-flyout {
48+
font-size: 14px;
49+
font-size: clamp(11px, 2.5vw, 16px);
50+
position: absolute;
51+
background: var(--drp-background);
52+
display: flex;
53+
flex-direction: column;
54+
z-index: 1000;
55+
border-radius: 5px;
56+
box-shadow: 0px 0px 5px 1px var(--drp-shadow-color);
57+
border: 1px solid #aaa;
58+
padding: 10px;
59+
}
60+
61+
.drp-flyout.open-right {
62+
right: 0;
63+
}
64+
65+
.drp-flyout.open-left {
66+
left: 0;
67+
}
68+
69+
.drp-flyout.open-center {
70+
left: -50%;
71+
}
72+
73+
.drp-flyout.alwaysOpen {
74+
top: 0;
75+
left: 0;
76+
}
77+
78+
.drp-flyout.tooltipChevron {
79+
top: calc(var(--drp-input-height) + 10px);
80+
}
81+
82+
.drp-flyout.tooltipChevron::after,
83+
.drp-flyout.tooltipChevron::before {
84+
content: "";
85+
position: absolute;
86+
height: 0;
87+
width: 0;
88+
border-style: solid;
89+
transform: rotate(-45deg);
90+
}
91+
92+
.drp-flyout.tooltipChevron::after {
93+
border-color: var(--drp-background) var(--drp-background) transparent
94+
transparent;
95+
border-width: 10px;
96+
}
97+
98+
.drp-flyout.tooltipChevron::before {
99+
border-color: var(--drp-shadow-color) var(--drp-shadow-color) transparent
100+
transparent;
101+
border-width: 12px;
102+
}
103+
104+
.drp-flyout.open-left.tooltipChevron::after {
105+
top: -8px;
106+
left: 15px;
107+
}
108+
109+
.drp-flyout.open-left.tooltipChevron::before {
110+
top: -10px;
111+
left: 13px;
112+
}
113+
114+
.drp-flyout.open-right.tooltipChevron::after {
115+
top: -8px;
116+
right: 15px;
117+
}
118+
119+
.drp-flyout.open-right.tooltipChevron::before {
120+
top: -10px;
121+
right: 13px;
122+
}
123+
124+
.drp-flyout.open-center.tooltipChevron::after {
125+
top: -8px;
126+
left: calc(50% - 12px);
127+
}
128+
129+
.drp-flyout.open-center.tooltipChevron::before {
130+
top: -10px;
131+
left: calc(50% - 13px);
132+
}
133+
134+
/* wrapper for both calendars */
135+
136+
.drp-calendars-wrapper {
137+
display: flex;
138+
}
139+
140+
/* wrapper for each calendar and its input box */
141+
142+
.drp-calendar-container {
143+
margin-left: 10px;
144+
margin-right: 10px;
145+
}
146+
147+
/* table tbody td */
148+
149+
.drp-date {
150+
text-align: center;
151+
padding: 2px 0;
152+
}
153+
154+
.drp-date.active {
155+
background: var(--drp-hover-color);
156+
}
157+
158+
.drp-date.off {
159+
opacity: 0.6;
160+
}
161+
162+
.drp-date:hover {
163+
background: var(--drp-hover-color);
164+
}
165+
166+
/* button in td */
167+
168+
.drp-btn {
169+
background: transparent;
170+
border: none;
171+
color: var(--foreground-color);
172+
}
173+
174+
.drp-btn:hover {
175+
cursor: pointer;
176+
}
177+
178+
.drp-date.disabled,
179+
.drp-date.disabled .drp-btn {
180+
cursor: not-allowed;
181+
pointer-events: none;
182+
}
183+
184+
/* range button */
185+
186+
.drp-link {
187+
color: var(--drp-link-color);
188+
}
189+
190+
.drp-link:hover {
191+
text-decoration: underline;
192+
}
193+
194+
/* main control buttons on bottom of flyout (not ranges) */
195+
196+
.drp-control {
197+
border-radius: 4px;
198+
padding: 3px 10px;
199+
margin: 0 5px;
200+
}
201+
202+
.drp-control.apply {
203+
color: white;
204+
background: #129a90;
205+
border: 1px solid #129a90;
206+
}
207+
208+
.drp-control.cancel {
209+
background: hsl(0, 0%, 90%);
210+
border: 1px solid #129a90;
211+
}
212+
213+
/* Utility classes */
214+
215+
.hidden {
216+
display: none !important;
217+
}
218+
219+
.drp-flex {
220+
margin: 10px 0 5px;
221+
display: flex;
222+
justify-content: center;
223+
align-items: center;
224+
}
225+
226+
.drp-space-around {
227+
justify-content: space-around;
228+
}
229+
230+
.drp-column {
231+
flex-direction: column;
232+
}
233+
234+
.my-0 {
235+
margin-top: 0;
236+
margin-bottom: 0;
237+
}

Diff for: ‎projects/angular-datetimerangepicker/src/styles/with-bootstrap.css

-352
This file was deleted.

Diff for: ‎projects/angular-datetimerangepicker/src/styles/without-bootstrap.css

-698
This file was deleted.

Diff for: ‎projects/angular-datetimerangepicker/src/time/time-component.html

+26-23
Large diffs are not rendered by default.

Diff for: ‎projects/angular-datetimerangepicker/src/time/time-component.ts

-2
Original file line numberDiff line numberDiff line change
@@ -95,13 +95,11 @@ export class TimePickerComponent implements OnInit, OnChanges {
9595
"minute",
9696
(this.selectedFromDate.get("minute") + value) % 60
9797
);
98-
console.log(this.selectedFromDate);
9998
} else {
10099
this.selectedToDate = this.selectedToDate.set(
101100
"minute",
102101
(this.selectedToDate.get("minute") + value) % 60
103102
);
104-
console.log(this.selectedToDate);
105103
}
106104
this.triggerTimeChanged();
107105
}

Diff for: ‎src/app/app.component.html

+31-14
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@
99
<ul class="navbar-nav">
1010
<li class="nav-item active">
1111
<a class="nav-link"
12-
href="https://github.com/technikhil314/angular-components/tree/master/projects/angular-datetimerangepicker">Go to
12+
href="https://github.com/technikhil314/angular-components/tree/master/projects/angular-datetimerangepicker">Go
13+
to
1314
Documentation</a>
1415
</li>
1516
</ul>
@@ -31,46 +32,58 @@ <h3>Configuration Options Generator</h3>
3132
<div class="form-group">
3233
<input type="checkbox" name="singleCalendar" [(ngModel)]=daterangepickerOptions.singleCalendar
3334
id="singleCalendar">
34-
<label class="label control-label" for="singleCalendar">Single Calendar</label>
35+
<label class="label font-weight-bold control-label" for="singleCalendar">Single Calendar</label>
3536
</div>
3637
<div class="form-group">
3738
<input type="checkbox" name="autoApply" [(ngModel)]=daterangepickerOptions.autoApply id="autoApply">
38-
<label class="label control-label" for="autoApply">Auto Apply</label>
39+
<label class="label font-weight-bold control-label" for="autoApply">Auto Apply</label>
3940
</div>
4041
<div class="form-group">
4142
<input type="checkbox" name="inactiveBeforeStart" [(ngModel)]=daterangepickerOptions.inactiveBeforeStart
4243
id="inactiveBeforeStart">
43-
<label class="label control-label" for="inactiveBeforeStart">Inactive Before Start</label>
44+
<label class="label font-weight-bold control-label" for="inactiveBeforeStart">Inactive Before Start</label>
4445
</div>
4546
<div class="form-group">
4647
<input type="checkbox" name="disableBeforeStart" [(ngModel)]=daterangepickerOptions.disableBeforeStart
4748
id="disableBeforeStart">
48-
<label class="label control-label" for="disableBeforeStart">Disable Before Start</label>
49+
<label class="label font-weight-bold control-label" for="disableBeforeStart">Disable Before Start</label>
4950
</div>
5051
<div class="form-group">
5152
<input type="checkbox" name="disabled" [(ngModel)]=daterangepickerOptions.disabled id="disabled">
52-
<label class="label control-label" for="disabled">Disabled</label>
53+
<label class="label font-weight-bold control-label" for="disabled">Disabled</label>
5354
</div>
5455
<div class="form-group">
5556
<input type="checkbox" name="showRanges" [(ngModel)]="daterangepickerOptions.showRanges" id="showRanges">
56-
<label class="label control-label" for="showRanges">Show Ranges</label>
57+
<label class="label font-weight-bold control-label" for="showRanges">Show Ranges</label>
5758
</div>
5859
<div class="form-group">
5960
<input type="checkbox" name="noDefaultRangeSelected" [(ngModel)]="daterangepickerOptions.noDefaultRangeSelected"
6061
id="noDefaultRangeSelected">
61-
<label class="label control-label" for="noDefaultRangeSelected">No Default Range Selected</label>
62+
<label class="label font-weight-bold control-label" for="noDefaultRangeSelected">No Default Range
63+
Selected</label>
6264
</div>
6365
<div class="form-group">
6466
<input type="checkbox" name="timepicker" [ngModel]="isTimePickerEnabled" (change)="setTimePicker($event)"
6567
id="timepicker">
66-
<label class="label control-label" for="timepicker">TimePicker</label>
68+
<label class="label font-weight-bold control-label" for="timepicker">TimePicker</label>
6769
</div>
6870
<div class="form-group">
6971
<input type="checkbox" name="alwaysOpen" [(ngModel)]="daterangepickerOptions.alwaysOpen" id="alwaysOpen">
70-
<label class="label control-label" for="alwaysOpen">Always Open</label>
72+
<label class="label font-weight-bold control-label" for="alwaysOpen">Always Open</label>
7173
</div>
7274
<div class="form-group">
73-
<p>Position</p>
75+
<p class="font-weight-bold">Theme</p>
76+
<div class="form-group">
77+
<input type="radio" name="theme" value="light" [(ngModel)]="daterangepickerOptions.theme" id="theme-light">
78+
<label class="label control-label" for="theme-light">Light</label>
79+
</div>
80+
<div class="form-group">
81+
<input type="radio" name="theme" value="dark" [(ngModel)]="daterangepickerOptions.theme" id="theme-dark">
82+
<label class="label control-label" for="theme-dark">Dark</label>
83+
</div>
84+
</div>
85+
<div class="form-group">
86+
<p class="font-weight-bold">Position</p>
7487
<div class="form-group">
7588
<input type="radio" name="position" value="left" [(ngModel)]="daterangepickerOptions.position"
7689
id="position-left" [disabled]="daterangepickerOptions.alwaysOpen">
@@ -84,7 +97,7 @@ <h3>Configuration Options Generator</h3>
8497
<div class="form-group">
8598
<input type="radio" name="position" value="center" [(ngModel)]="daterangepickerOptions.position"
8699
id="position-center" [disabled]="daterangepickerOptions.alwaysOpen">
87-
<label class="label control-label" for="position-left">Center</label>
100+
<label class="label control-label" for="position-center">Center</label>
88101
</div>
89102
</div>
90103
<div class="col-md-12">
@@ -96,9 +109,13 @@ <h4>Configuration</h4>
96109
<div class="col-md-5 col-lg-5">
97110
<h3>Live Demo</h3>
98111
<div class="col-md-6 flush">
99-
<daterangepicker [class]="'col-md-12 col-lg-12 form-control'" [options]="daterangepickerOptions"
100-
(rangeSelected)="rangeSelected($event)">
112+
<daterangepicker [options]="daterangepickerOptions" (rangeSelected)="rangeSelected($event)">
101113
</daterangepicker>
114+
<p>
115+
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rem expedita porro neque doloremque repellendus,
116+
eligendi ipsa ut provident cum deleniti molestias, in vero, voluptatum placeat. Distinctio iste quidem est
117+
aliquam.
118+
</p>
102119
</div>
103120
</div>
104121
</div>

Diff for: ‎src/app/app.component.ts

+1
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ export class AppComponent {
1818
inactiveBeforeStart: true,
1919
autoApply: true,
2020
showRanges: true,
21+
theme: "light",
2122
preDefinedRanges: [
2223
{
2324
name: "Day After tomorow",

0 commit comments

Comments
 (0)
Please sign in to comment.