Skip to content

Commit a6e8841

Browse files
zoltanszogyenyizoltanszogyenyi
committed
Fix styling issues.
1 parent 392630d commit a6e8841

File tree

11 files changed

+732
-326884
lines changed

11 files changed

+732
-326884
lines changed

‎README.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,13 @@ This [Tailwind CSS Datepicker](https://flowbite.com/docs/plugins/datepicker/) is
1313
If you want to use the **Tailwind Datepicker** plugin using JavaScript you will need to include it into your project via NPM:
1414

1515
```bash
16-
npm i @themesberg/tailwind-datepicker --save
16+
npm i flowbite-datepicker --save
1717
```
1818

1919
After you've installed the NPM library, you will need to import the `Datepicker` module:
2020

2121
```javascript
22-
import Datepicker from '@themesberg/tailwind-datepicker/Datepicker';
22+
import Datepicker from 'flowbite-datepicker/Datepicker';
2323
```
2424

2525
Initialize a new element using the `Datepicker` constructor and optionally add custom options based on your needs:
@@ -34,7 +34,7 @@ new Datepicker(datepickerEl, {
3434
If you want to use the **Tailwind Date Range Picker** you have to import the `DateRangePicker` module:
3535

3636
```javascript
37-
import DateRangePicker from '@themesberg/tailwind-datepicker/DateRangePicker';
37+
import DateRangePicker from 'flowbite-datepicker/DateRangePicker';
3838
```
3939

4040
Then in the same fashion you can initalize a date range picker component by using the `DateRangePicker` constructor:

‎demo/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!DOCTYPE html>
2-
<html class="dark">
2+
<html class="">
33
<head>
44
<meta charset="utf-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1">
@@ -115,7 +115,7 @@
115115
</head>
116116
<body class="dark:bg-gray-900">
117117
<main>
118-
<section class="section container is-fluid">
118+
<section class="container section is-fluid">
119119
<div class="columns">
120120
<div class="column">
121121
<p>Vanilla JS Datepicker</p>

‎dist/js/datepicker-full.js‎

Lines changed: 19 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -760,7 +760,7 @@
760760
const pickerTemplate = optimizeTemplateHTML(`<div class="datepicker hidden">
761761
<div class="datepicker-picker inline-block rounded-lg bg-white dark:bg-gray-700 shadow-lg p-4">
762762
<div class="datepicker-header">
763-
<div class="datepicker-title bg-white dark:bg-gray-700 px-2 py-3 text-center font-semibold"></div>
763+
<div class="datepicker-title bg-white dark:bg-gray-700 dark:text-white px-2 py-3 text-center font-semibold"></div>
764764
<div class="datepicker-controls flex justify-between mb-2">
765765
<button type="button" class="bg-white dark:bg-gray-700 rounded-lg text-gray-500 dark:text-white hover:bg-gray-100 dark:hover:bg-gray-600 hover:text-gray-900 dark:hover:text-white text-lg p-2.5 focus:outline-none focus:ring-2 focus:ring-gray-200 prev-btn"></button>
766766
<button type="button" class="text-sm rounded-lg text-gray-900 dark:text-white bg-white dark:bg-gray-700 font-semibold py-2.5 px-5 hover:bg-gray-100 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-200 view-switch"></button>
@@ -771,7 +771,7 @@
771771
<div class="datepicker-footer">
772772
<div class="datepicker-controls flex space-x-2 mt-2">
773773
<button type="button" class="%buttonClass% today-btn text-white bg-blue-700 dark:bg-blue-600 hover:bg-blue-800 dark:hover:bg-blue-700 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2 text-center w-1/2"></button>
774-
<button type="button" class="%buttonClass% clear-btn text-gray-900 dark:text-white bg-white border border-gray-300 hover:bg-gray-100 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2 text-center w-1/2"></button>
774+
<button type="button" class="%buttonClass% clear-btn text-gray-900 dark:text-white bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-600 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2 text-center w-1/2"></button>
775775
</div>
776776
</div>
777777
</div>
@@ -1024,7 +1024,7 @@
10241024
}
10251025
if (this.selected.includes(current)) {
10261026
classList.add('selected', 'bg-blue-700', 'text-white', 'dark:bg-blue-600', 'dark:text-white');
1027-
classList.remove('text-gray-900', 'text-gray-500', 'hover:bg-gray-100', 'dark:text-white', 'dark:hover:bg-gray-600');
1027+
classList.remove('text-gray-900', 'text-gray-500', 'hover:bg-gray-100', 'dark:text-white', 'dark:hover:bg-gray-600', 'bg-gray-100', 'bg-gray-200');
10281028
}
10291029
if (current === this.focused) {
10301030
classList.add('focused');
@@ -1042,12 +1042,13 @@
10421042
this.grid
10431043
.querySelectorAll('.range, .range-start, .range-end, .selected, .focused')
10441044
.forEach((el) => {
1045-
el.classList.remove('range', 'range-start', 'range-end', 'selected', 'bg-blue-700', 'text-white', 'dark:bg-blue-600', 'dark:text-white', 'focused', 'bg-gray-100', 'dark:bg-gray-600');
1045+
el.classList.remove('range', 'range-start', 'range-end', 'selected', 'bg-blue-700', 'text-white', 'dark:bg-blue-600', 'dark:text-white', 'focused');
10461046
el.classList.add('text-gray-900', 'rounded-lg', 'dark:text-white');
10471047
});
10481048
Array.from(this.grid.children).forEach((el) => {
10491049
const current = Number(el.dataset.date);
10501050
const classList = el.classList;
1051+
classList.remove('bg-gray-200', 'dark:bg-gray-700', 'rounded-l-lg', 'rounded-r-lg');
10511052
if (current > rangeStart && current < rangeEnd) {
10521053
classList.add('range', 'bg-gray-200', 'dark:bg-gray-600');
10531054
classList.remove('rounded-lg');
@@ -1062,10 +1063,10 @@
10621063
}
10631064
if (this.selected.includes(current)) {
10641065
classList.add('selected', 'bg-blue-700', 'text-white', 'dark:bg-blue-600', 'dark:text-white');
1065-
classList.remove('text-gray-900', 'hover:bg-gray-100', 'dark:text-white', 'dark:hover:bg-gray-600');
1066+
classList.remove('text-gray-900', 'hover:bg-gray-100', 'dark:text-white', 'dark:hover:bg-gray-600', 'bg-gray-100', 'bg-gray-200');
10661067
}
10671068
if (current === this.focused) {
1068-
classList.add('focused', 'bg-gray-100', 'dark:bg-gray-600');
1069+
classList.add('focused');
10691070
}
10701071
});
10711072
}
@@ -1074,9 +1075,9 @@
10741075
refreshFocus() {
10751076
const index = Math.round((this.focused - this.start) / 86400000);
10761077
this.grid.querySelectorAll('.focused').forEach((el) => {
1077-
el.classList.remove('focused', 'bg-gray-100', 'dark:bg-gray-600');
1078+
el.classList.remove('focused');
10781079
});
1079-
this.grid.children[index].classList.add('focused', 'bg-gray-100', 'dark:bg-gray-600');
1080+
this.grid.children[index].classList.add('focused');
10801081
}
10811082
}
10821083

@@ -1225,7 +1226,7 @@
12251226
classList.remove('text-gray-900', 'hover:bg-gray-100', 'dark:text-white', 'dark:hover:bg-gray-600');
12261227
}
12271228
if (index === this.focused) {
1228-
classList.add('focused', 'bg-gray-100', 'dark:bg-gray-600');
1229+
classList.add('focused');
12291230
}
12301231

12311232
if (this.beforeShow) {
@@ -1241,7 +1242,7 @@
12411242
this.grid
12421243
.querySelectorAll('.range, .range-start, .range-end, .selected, .focused')
12431244
.forEach((el) => {
1244-
el.classList.remove('range', 'range-start', 'range-end', 'selected', 'bg-blue-700', 'dark:bg-blue-600', 'dark:text-white', 'text-white', 'focused', 'bg-gray-100', 'dark:bg-gray-600');
1245+
el.classList.remove('range', 'range-start', 'range-end', 'selected', 'bg-blue-700', 'dark:bg-blue-600', 'dark:text-white', 'text-white', 'focused');
12451246
el.classList.add('text-gray-900', 'hover:bg-gray-100', 'dark:text-white', 'dark:hover:bg-gray-600');
12461247
});
12471248
Array.from(this.grid.children).forEach((el, index) => {
@@ -1260,17 +1261,17 @@
12601261
classList.remove('text-gray-900', 'hover:bg-gray-100', 'dark:text-white', 'dark:hover:bg-gray-600');
12611262
}
12621263
if (index === this.focused) {
1263-
classList.add('focused', 'bg-gray-100', 'dark:bg-gray-600');
1264+
classList.add('focused');
12641265
}
12651266
});
12661267
}
12671268

12681269
// Update the view UI by applying the change of focused item
12691270
refreshFocus() {
12701271
this.grid.querySelectorAll('.focused').forEach((el) => {
1271-
el.classList.remove('focused', 'bg-gray-100'), 'dark:bg-gray-600';
1272+
el.classList.remove('focused');
12721273
});
1273-
this.grid.children[this.focused].classList.add('focused', 'bg-gray-100', 'dark:bg-gray-600');
1274+
this.grid.children[this.focused].classList.add('focused');
12741275
}
12751276
}
12761277

@@ -1391,7 +1392,7 @@
13911392
classList.remove('text-gray-900', 'hover:bg-gray-100', 'dark:text-white', 'dark:hover:bg-gray-600');
13921393
}
13931394
if (current === this.focused) {
1394-
classList.add('focused', 'bg-gray-100', 'dark:bg-gray-600');
1395+
classList.add('focused');
13951396
}
13961397

13971398
if (this.beforeShow) {
@@ -1406,7 +1407,7 @@
14061407
this.grid
14071408
.querySelectorAll('.range, .range-start, .range-end, .selected, .focused')
14081409
.forEach((el) => {
1409-
el.classList.remove('range', 'range-start', 'range-end', 'selected', 'bg-blue-700', 'text-white', 'dark:bg-blue-600', 'dark:text-white', 'focused', 'bg-gray-100', 'dark:bg-gray-600');
1410+
el.classList.remove('range', 'range-start', 'range-end', 'selected', 'bg-blue-700', 'text-white', 'dark:bg-blue-600', 'dark:text-white', 'focused');
14101411
});
14111412
Array.from(this.grid.children).forEach((el) => {
14121413
const current = Number(el.textContent);
@@ -1425,7 +1426,7 @@
14251426
classList.remove('text-gray-900', 'hover:bg-gray-100', 'dark:text-white', 'dark:hover:bg-gray-600');
14261427
}
14271428
if (current === this.focused) {
1428-
classList.add('focused', 'bg-gray-100', 'dark:bg-gray-600');
1429+
classList.add('focused');
14291430
}
14301431
});
14311432
}
@@ -1434,9 +1435,9 @@
14341435
refreshFocus() {
14351436
const index = Math.round((this.focused - this.start) / this.step);
14361437
this.grid.querySelectorAll('.focused').forEach((el) => {
1437-
el.classList.remove('focused', 'bg-gray-100', 'dark:bg-gray-600');
1438+
el.classList.remove('focused');
14381439
});
1439-
this.grid.children[index].classList.add('focused', 'bg-gray-100', 'dark:bg-gray-600');
1440+
this.grid.children[index].classList.add('focused');
14401441
}
14411442
}
14421443

‎dist/js/datepicker.js‎

Lines changed: 19 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -760,7 +760,7 @@ var Datepicker = (function () {
760760
const pickerTemplate = optimizeTemplateHTML(`<div class="datepicker hidden">
761761
<div class="datepicker-picker inline-block rounded-lg bg-white dark:bg-gray-700 shadow-lg p-4">
762762
<div class="datepicker-header">
763-
<div class="datepicker-title bg-white dark:bg-gray-700 px-2 py-3 text-center font-semibold"></div>
763+
<div class="datepicker-title bg-white dark:bg-gray-700 dark:text-white px-2 py-3 text-center font-semibold"></div>
764764
<div class="datepicker-controls flex justify-between mb-2">
765765
<button type="button" class="bg-white dark:bg-gray-700 rounded-lg text-gray-500 dark:text-white hover:bg-gray-100 dark:hover:bg-gray-600 hover:text-gray-900 dark:hover:text-white text-lg p-2.5 focus:outline-none focus:ring-2 focus:ring-gray-200 prev-btn"></button>
766766
<button type="button" class="text-sm rounded-lg text-gray-900 dark:text-white bg-white dark:bg-gray-700 font-semibold py-2.5 px-5 hover:bg-gray-100 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-200 view-switch"></button>
@@ -771,7 +771,7 @@ var Datepicker = (function () {
771771
<div class="datepicker-footer">
772772
<div class="datepicker-controls flex space-x-2 mt-2">
773773
<button type="button" class="%buttonClass% today-btn text-white bg-blue-700 dark:bg-blue-600 hover:bg-blue-800 dark:hover:bg-blue-700 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2 text-center w-1/2"></button>
774-
<button type="button" class="%buttonClass% clear-btn text-gray-900 dark:text-white bg-white border border-gray-300 hover:bg-gray-100 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2 text-center w-1/2"></button>
774+
<button type="button" class="%buttonClass% clear-btn text-gray-900 dark:text-white bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-600 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2 text-center w-1/2"></button>
775775
</div>
776776
</div>
777777
</div>
@@ -1024,7 +1024,7 @@ var Datepicker = (function () {
10241024
}
10251025
if (this.selected.includes(current)) {
10261026
classList.add('selected', 'bg-blue-700', 'text-white', 'dark:bg-blue-600', 'dark:text-white');
1027-
classList.remove('text-gray-900', 'text-gray-500', 'hover:bg-gray-100', 'dark:text-white', 'dark:hover:bg-gray-600');
1027+
classList.remove('text-gray-900', 'text-gray-500', 'hover:bg-gray-100', 'dark:text-white', 'dark:hover:bg-gray-600', 'bg-gray-100', 'bg-gray-200');
10281028
}
10291029
if (current === this.focused) {
10301030
classList.add('focused');
@@ -1042,12 +1042,13 @@ var Datepicker = (function () {
10421042
this.grid
10431043
.querySelectorAll('.range, .range-start, .range-end, .selected, .focused')
10441044
.forEach((el) => {
1045-
el.classList.remove('range', 'range-start', 'range-end', 'selected', 'bg-blue-700', 'text-white', 'dark:bg-blue-600', 'dark:text-white', 'focused', 'bg-gray-100', 'dark:bg-gray-600');
1045+
el.classList.remove('range', 'range-start', 'range-end', 'selected', 'bg-blue-700', 'text-white', 'dark:bg-blue-600', 'dark:text-white', 'focused');
10461046
el.classList.add('text-gray-900', 'rounded-lg', 'dark:text-white');
10471047
});
10481048
Array.from(this.grid.children).forEach((el) => {
10491049
const current = Number(el.dataset.date);
10501050
const classList = el.classList;
1051+
classList.remove('bg-gray-200', 'dark:bg-gray-700', 'rounded-l-lg', 'rounded-r-lg');
10511052
if (current > rangeStart && current < rangeEnd) {
10521053
classList.add('range', 'bg-gray-200', 'dark:bg-gray-600');
10531054
classList.remove('rounded-lg');
@@ -1062,10 +1063,10 @@ var Datepicker = (function () {
10621063
}
10631064
if (this.selected.includes(current)) {
10641065
classList.add('selected', 'bg-blue-700', 'text-white', 'dark:bg-blue-600', 'dark:text-white');
1065-
classList.remove('text-gray-900', 'hover:bg-gray-100', 'dark:text-white', 'dark:hover:bg-gray-600');
1066+
classList.remove('text-gray-900', 'hover:bg-gray-100', 'dark:text-white', 'dark:hover:bg-gray-600', 'bg-gray-100', 'bg-gray-200');
10661067
}
10671068
if (current === this.focused) {
1068-
classList.add('focused', 'bg-gray-100', 'dark:bg-gray-600');
1069+
classList.add('focused');
10691070
}
10701071
});
10711072
}
@@ -1074,9 +1075,9 @@ var Datepicker = (function () {
10741075
refreshFocus() {
10751076
const index = Math.round((this.focused - this.start) / 86400000);
10761077
this.grid.querySelectorAll('.focused').forEach((el) => {
1077-
el.classList.remove('focused', 'bg-gray-100', 'dark:bg-gray-600');
1078+
el.classList.remove('focused');
10781079
});
1079-
this.grid.children[index].classList.add('focused', 'bg-gray-100', 'dark:bg-gray-600');
1080+
this.grid.children[index].classList.add('focused');
10801081
}
10811082
}
10821083

@@ -1225,7 +1226,7 @@ var Datepicker = (function () {
12251226
classList.remove('text-gray-900', 'hover:bg-gray-100', 'dark:text-white', 'dark:hover:bg-gray-600');
12261227
}
12271228
if (index === this.focused) {
1228-
classList.add('focused', 'bg-gray-100', 'dark:bg-gray-600');
1229+
classList.add('focused');
12291230
}
12301231

12311232
if (this.beforeShow) {
@@ -1241,7 +1242,7 @@ var Datepicker = (function () {
12411242
this.grid
12421243
.querySelectorAll('.range, .range-start, .range-end, .selected, .focused')
12431244
.forEach((el) => {
1244-
el.classList.remove('range', 'range-start', 'range-end', 'selected', 'bg-blue-700', 'dark:bg-blue-600', 'dark:text-white', 'text-white', 'focused', 'bg-gray-100', 'dark:bg-gray-600');
1245+
el.classList.remove('range', 'range-start', 'range-end', 'selected', 'bg-blue-700', 'dark:bg-blue-600', 'dark:text-white', 'text-white', 'focused');
12451246
el.classList.add('text-gray-900', 'hover:bg-gray-100', 'dark:text-white', 'dark:hover:bg-gray-600');
12461247
});
12471248
Array.from(this.grid.children).forEach((el, index) => {
@@ -1260,17 +1261,17 @@ var Datepicker = (function () {
12601261
classList.remove('text-gray-900', 'hover:bg-gray-100', 'dark:text-white', 'dark:hover:bg-gray-600');
12611262
}
12621263
if (index === this.focused) {
1263-
classList.add('focused', 'bg-gray-100', 'dark:bg-gray-600');
1264+
classList.add('focused');
12641265
}
12651266
});
12661267
}
12671268

12681269
// Update the view UI by applying the change of focused item
12691270
refreshFocus() {
12701271
this.grid.querySelectorAll('.focused').forEach((el) => {
1271-
el.classList.remove('focused', 'bg-gray-100'), 'dark:bg-gray-600';
1272+
el.classList.remove('focused');
12721273
});
1273-
this.grid.children[this.focused].classList.add('focused', 'bg-gray-100', 'dark:bg-gray-600');
1274+
this.grid.children[this.focused].classList.add('focused');
12741275
}
12751276
}
12761277

@@ -1391,7 +1392,7 @@ var Datepicker = (function () {
13911392
classList.remove('text-gray-900', 'hover:bg-gray-100', 'dark:text-white', 'dark:hover:bg-gray-600');
13921393
}
13931394
if (current === this.focused) {
1394-
classList.add('focused', 'bg-gray-100', 'dark:bg-gray-600');
1395+
classList.add('focused');
13951396
}
13961397

13971398
if (this.beforeShow) {
@@ -1406,7 +1407,7 @@ var Datepicker = (function () {
14061407
this.grid
14071408
.querySelectorAll('.range, .range-start, .range-end, .selected, .focused')
14081409
.forEach((el) => {
1409-
el.classList.remove('range', 'range-start', 'range-end', 'selected', 'bg-blue-700', 'text-white', 'dark:bg-blue-600', 'dark:text-white', 'focused', 'bg-gray-100', 'dark:bg-gray-600');
1410+
el.classList.remove('range', 'range-start', 'range-end', 'selected', 'bg-blue-700', 'text-white', 'dark:bg-blue-600', 'dark:text-white', 'focused');
14101411
});
14111412
Array.from(this.grid.children).forEach((el) => {
14121413
const current = Number(el.textContent);
@@ -1425,7 +1426,7 @@ var Datepicker = (function () {
14251426
classList.remove('text-gray-900', 'hover:bg-gray-100', 'dark:text-white', 'dark:hover:bg-gray-600');
14261427
}
14271428
if (current === this.focused) {
1428-
classList.add('focused', 'bg-gray-100', 'dark:bg-gray-600');
1429+
classList.add('focused');
14291430
}
14301431
});
14311432
}
@@ -1434,9 +1435,9 @@ var Datepicker = (function () {
14341435
refreshFocus() {
14351436
const index = Math.round((this.focused - this.start) / this.step);
14361437
this.grid.querySelectorAll('.focused').forEach((el) => {
1437-
el.classList.remove('focused', 'bg-gray-100', 'dark:bg-gray-600');
1438+
el.classList.remove('focused');
14381439
});
1439-
this.grid.children[index].classList.add('focused', 'bg-gray-100', 'dark:bg-gray-600');
1440+
this.grid.children[index].classList.add('focused');
14401441
}
14411442
}
14421443

0 commit comments

Comments
 (0)