Skip to content

Commit 79ff6c2

Browse files
alumukoalumuko
committed
add a extra css to dark version
1 parent 0b2d6fd commit 79ff6c2

File tree

5 files changed

+512
-1
lines changed

5 files changed

+512
-1
lines changed

‎README.md

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ I just changed the code a bit to not need jquery.
88

99

1010
## Requirements
11-
- [Moment.js](https://momentjs.com/)
11+
- [Moment.js](https://momentjs.com/) (version 2.29.1 is recommended.)
1212
### IE11
1313
If you want to use on Internet Explorer 11, include [Polyfill](https://polyfill.io/v3/polyfill.js?ua=ie/11) to use CustomEvent, Object.assign, Element.prototype.closest and Element.prototype.matches features.
1414

@@ -155,6 +155,21 @@ new DateRangePicker(bindElement, options, callback);
155155
```
156156
See [datetime example page](/examples/datetime-example.html)</a>.
157157

158+
## Extra
159+
## A Dark Version CSS
160+
![Dark Data Time Range Picker](/examples/vanilla-datatime-range-picker-dark.png)
161+
162+
change
163+
```
164+
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/gh/alumuko/vanilla-datetimerange-picker@latest/dist/vanilla-datetimerange-picker.css">
165+
```
166+
to
167+
```
168+
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/gh/alumuko/vanilla-datetimerange-picker@latest/extra/vanilla-datetimerange-picker-dark.css">
169+
```
170+
171+
See [datetime dark example page](/examples/datetime-example-dark.html)</a>.
172+
158173
## Special Thanks
159174
Special thanks to [Dan Grossman](http://www.dangrossman.info/)
160175

‎examples/datetime-example-dark.html

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6+
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/gh/alumuko/vanilla-datetimerange-picker@latest/extra/vanilla-datetimerange-picker-dark.css">
7+
<title>vanilla-datetimerange-picker simple example.</title>
8+
<style>
9+
body {
10+
color: white;
11+
background-color: black;
12+
}
13+
</style>
14+
</head>
15+
<body>
16+
<div><input type="text" id="datetimerange-input1" size="40" style="text-align:center"></div>
17+
<script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js" type="text/javascript"></script>
18+
<script src="https://cdn.jsdelivr.net/gh/alumuko/vanilla-datetimerange-picker@latest/dist/vanilla-datetimerange-picker.js"></script>
19+
<script>
20+
window.addEventListener("load", function (event) {
21+
let drp = new DateRangePicker('datetimerange-input1',
22+
{
23+
//startDate: '2000-01-01',
24+
//endDate: '2000-01-03',
25+
//minDate: '2021-07-15 15:00',
26+
//maxDate: '2021-08-16 15:00',
27+
//maxSpan: { "days": 9 },
28+
//showDropdowns: true,
29+
//minYear: 2020,
30+
//maxYear: 2022,
31+
//showWeekNumbers: true,
32+
//showISOWeekNumbers: true,
33+
timePicker: true,
34+
//timePickerIncrement: 10,
35+
//timePicker24Hour: true,
36+
//timePickerSeconds: true,
37+
//showCustomRangeLabel: false,
38+
alwaysShowCalendars: true,
39+
//opens: 'center',
40+
//drops: 'up',
41+
//singleDatePicker: true,
42+
//autoApply: true,
43+
//linkedCalendars: false,
44+
//isInvalidDate: function(m){
45+
// return m.weekday() == 3;
46+
//},
47+
//isCustomDate: function(m){
48+
// return "weekday-" + m.weekday();
49+
//},
50+
//autoUpdateInput: false,
51+
ranges: {
52+
'Today': [moment().startOf('day'), moment().endOf('day')],
53+
'Yesterday': [moment().subtract(1, 'days').startOf('day'), moment().subtract(1, 'days').endOf('day')],
54+
'Last 7 Days': [moment().subtract(6, 'days').startOf('day'), moment().endOf('day')],
55+
'This Month': [moment().startOf('month').startOf('day'), moment().endOf('month').endOf('day')],
56+
},
57+
locale: {
58+
format: "YYYY-MM-DD HH:mm:ss",
59+
}
60+
},
61+
function (start, end) {
62+
alert(start.format() + " - " + end.format());
63+
})
64+
//drp.setStartDate('2014/03/01');
65+
//drp.setEndDate('2014/03/03');
66+
window.addEventListener('apply.daterangepicker', function (ev) {
67+
console.log(ev.detail.startDate.format('YYYY-MM-DD'));
68+
console.log(ev.detail.endDate.format('YYYY-MM-DD'));
69+
});
70+
});
71+
</script>
72+
</body>
73+
</html>

‎examples/vanilla-datatime-range-picker-dark.png

10.7 KB
Loading

‎examples/vanilla-datatime-range-picker.png

-1.05 KB
Loading

0 commit comments

Comments
 (0)