├── index.html
├── main.css
└── main.js
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Date Picker
8 |
9 |
10 |
11 |
12 | CUSTOMDATEPICKER
13 |
14 |
27 |
28 |
29 |
30 |
--------------------------------------------------------------------------------
/main.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | padding: 0;
4 | box-sizing: border-box;
5 | }
6 |
7 | body {
8 | background-color: #FFCE00;
9 | font-family: 'Saira', Arial, Helvetica, sans-serif;
10 | }
11 |
12 | h1 {
13 | margin: 30px 0px;
14 | color: #313131;
15 | font-size: 42px;
16 | font-weight: 900;
17 | text-align: center;
18 | }
19 |
20 | h1 span {
21 | font-weight: 300;
22 | }
23 |
24 | .date-picker {
25 | position: relative;
26 | width: 100%;
27 | max-width: 320px;
28 | height: 60px;
29 | background-color: #FFF;
30 | margin: 30px auto;
31 | box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.2);
32 |
33 | cursor: pointer;
34 | user-select: none;
35 | }
36 |
37 | .date-picker:hover {
38 | background-color: #F3F3F3;
39 | }
40 |
41 | .date-picker .selected-date {
42 | width: 100%;
43 | height: 100%;
44 |
45 | display: flex;
46 | justify-content: center;
47 | align-items: center;
48 |
49 | color: #313131;
50 | font-size: 28px;
51 | }
52 |
53 | .date-picker .dates {
54 | display: none;
55 | position: absolute;
56 | top: 100%;
57 | left: 0;
58 | right: 0;
59 |
60 | background-color: #FFF;
61 | }
62 |
63 | .date-picker .dates.active {
64 | display: block;
65 | }
66 |
67 | .date-picker .dates .month {
68 | display: flex;
69 | justify-content: space-between;
70 | align-items: center;
71 | border-bottom: 2px solid #EEE;
72 | }
73 |
74 | .date-picker .dates .month .arrows {
75 | width: 35px;
76 | height: 35px;
77 | display: flex;
78 | justify-content: center;
79 | align-items: center;
80 | color: #313131;
81 | font-size: 20px;
82 | }
83 |
84 | .date-picker .dates .month .arrows:hover {
85 | background-color: #F3F3F3;
86 | }
87 |
88 | .date-picker .dates .month .arrows:active {
89 | background-color: #00CA85;
90 | }
91 |
92 | .date-picker .dates .days {
93 | display: grid;
94 | grid-template-columns: repeat(7, 1fr);
95 | height: 200px;
96 | }
97 | .date-picker .dates .days .day {
98 | display: flex;
99 | justify-content: center;
100 | align-items: center;
101 | color: #313131;
102 | }
103 | .date-picker .dates .days .day.selected {
104 | background-color: #00CA85;
105 | }
106 |
107 |
--------------------------------------------------------------------------------
/main.js:
--------------------------------------------------------------------------------
1 | const date_picker_element = document.querySelector('.date-picker');
2 | const selected_date_element = document.querySelector('.date-picker .selected-date');
3 | const dates_element = document.querySelector('.date-picker .dates');
4 | const mth_element = document.querySelector('.date-picker .dates .month .mth');
5 | const next_mth_element = document.querySelector('.date-picker .dates .month .next-mth');
6 | const prev_mth_element = document.querySelector('.date-picker .dates .month .prev-mth');
7 | const days_element = document.querySelector('.date-picker .dates .days');
8 |
9 | const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
10 |
11 | let date = new Date();
12 | let day = date.getDate();
13 | let month = date.getMonth();
14 | let year = date.getFullYear();
15 |
16 | let selectedDate = date;
17 | let selectedDay = day;
18 | let selectedMonth = month;
19 | let selectedYear = year;
20 |
21 | mth_element.textContent = months[month] + ' ' + year;
22 |
23 | selected_date_element.textContent = formatDate(date);
24 | selected_date_element.dataset.value = selectedDate;
25 |
26 | populateDates();
27 |
28 | // EVENT LISTENERS
29 | date_picker_element.addEventListener('click', toggleDatePicker);
30 | next_mth_element.addEventListener('click', goToNextMonth);
31 | prev_mth_element.addEventListener('click', goToPrevMonth);
32 |
33 | // FUNCTIONS
34 | function toggleDatePicker (e) {
35 | if (!checkEventPathForClass(e.path, 'dates')) {
36 | dates_element.classList.toggle('active');
37 | }
38 | }
39 |
40 | function goToNextMonth (e) {
41 | month++;
42 | if (month > 11) {
43 | month = 0;
44 | year++;
45 | }
46 | mth_element.textContent = months[month] + ' ' + year;
47 | populateDates();
48 | }
49 |
50 | function goToPrevMonth (e) {
51 | month--;
52 | if (month < 0) {
53 | month = 11;
54 | year--;
55 | }
56 | mth_element.textContent = months[month] + ' ' + year;
57 | populateDates();
58 | }
59 |
60 | function populateDates (e) {
61 | days_element.innerHTML = '';
62 | let amount_days = 31;
63 |
64 | if (month == 1) {
65 | amount_days = 28;
66 | }
67 |
68 | for (let i = 0; i < amount_days; i++) {
69 | const day_element = document.createElement('div');
70 | day_element.classList.add('day');
71 | day_element.textContent = i + 1;
72 |
73 | if (selectedDay == (i + 1) && selectedYear == year && selectedMonth == month) {
74 | day_element.classList.add('selected');
75 | }
76 |
77 | day_element.addEventListener('click', function () {
78 | selectedDate = new Date(year + '-' + (month + 1) + '-' + (i + 1));
79 | selectedDay = (i + 1);
80 | selectedMonth = month;
81 | selectedYear = year;
82 |
83 | selected_date_element.textContent = formatDate(selectedDate);
84 | selected_date_element.dataset.value = selectedDate;
85 |
86 | populateDates();
87 | });
88 |
89 | days_element.appendChild(day_element);
90 | }
91 | }
92 |
93 | // HELPER FUNCTIONS
94 | function checkEventPathForClass (path, selector) {
95 | for (let i = 0; i < path.length; i++) {
96 | if (path[i].classList && path[i].classList.contains(selector)) {
97 | return true;
98 | }
99 | }
100 |
101 | return false;
102 | }
103 | function formatDate (d) {
104 | let day = d.getDate();
105 | if (day < 10) {
106 | day = '0' + day;
107 | }
108 |
109 | let month = d.getMonth() + 1;
110 | if (month < 10) {
111 | month = '0' + month;
112 | }
113 |
114 | let year = d.getFullYear();
115 |
116 | return day + ' / ' + month + ' / ' + year;
117 | }
118 |
--------------------------------------------------------------------------------