Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit d6ba048

Browse files
create custom date picker
Signed-off-by: Amit Amrutiya <amitamrutiya2210@gmail.com>
1 parent 6bca8a9 commit d6ba048

File tree

3 files changed

+274
-0
lines changed

3 files changed

+274
-0
lines changed
Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link rel="stylesheet" href="style.css" />
8+
<title>Custom Date picker</title>
9+
</head>
10+
<body>
11+
<h1>CUSTOM DATE PICKER</h1>
12+
13+
<div class="date-picker-wrapper">
14+
<div class="selected-date"></div>
15+
16+
<div class="dates-container">
17+
<div class="month">
18+
<div class="arrows prev-month">&lt;</div>
19+
<div class="month-item"></div>
20+
<div class="arrows next-month">&gt;</div>
21+
</div>
22+
23+
<div class="days-container"></div>
24+
</div>
25+
</div>
26+
27+
<script src="script.js"></script>
28+
</body>
29+
</html>
Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
const date_picker_ele = document.querySelector(".date-picker-wrapper");
2+
const selected_date_ele = document.querySelector(" .selected-date");
3+
const dates_ele = document.querySelector(".dates-container");
4+
const month_ele = document.querySelector(".month .month-item");
5+
const next_month_ele = document.querySelector(".month .next-month");
6+
const prev_month_ele = document.querySelector(".month .prev-month");
7+
const days_ele = document.querySelector(".days-container");
8+
9+
const months = [
10+
"January",
11+
"February",
12+
"March",
13+
"April",
14+
"May",
15+
"June",
16+
"July",
17+
"August",
18+
"September",
19+
"October",
20+
"November",
21+
"December",
22+
];
23+
24+
let date = new Date();
25+
let day = date.getDate();
26+
let month = date.getMonth();
27+
let year = date.getFullYear();
28+
29+
let selectedDate = date;
30+
let selectedDay = day;
31+
let selectedMonth = month;
32+
let selectedYear = year;
33+
34+
month_ele.textContent = months[month] + " " + year;
35+
36+
selected_date_ele.textContent = formatDate(date);
37+
selected_date_ele.dataset.value = selectedDate;
38+
39+
populateDates();
40+
41+
date_picker_ele.addEventListener("click", toggleDatePicker);
42+
next_month_ele.addEventListener("click", goToNextMonth);
43+
prev_month_ele.addEventListener("click", goToPrevMonth);
44+
45+
function toggleDatePicker(e) {
46+
if (!checkClassExist(e.composedPath(), "dates-container")) {
47+
dates_ele.classList.toggle("active");
48+
}
49+
}
50+
51+
function checkClassExist(path, selector) {
52+
for (let i = 0; i < path.length; i++) {
53+
if (path[i].classList && path[i].classList.contains(selector)) {
54+
return true;
55+
}
56+
}
57+
58+
return false;
59+
}
60+
61+
function goToNextMonth() {
62+
month++;
63+
if (month > 11) {
64+
month = 0;
65+
year++;
66+
}
67+
month_ele.textContent = months[month] + " " + year;
68+
populateDates();
69+
}
70+
71+
function goToPrevMonth() {
72+
month--;
73+
if (month < 0) {
74+
month = 11;
75+
year--;
76+
}
77+
month_ele.textContent = months[month] + " " + year;
78+
populateDates();
79+
}
80+
81+
function populateDates() {
82+
days_ele.innerHTML = "";
83+
let total_days;
84+
85+
if (month == 1) {
86+
total_days = 28;
87+
} else if (month % 2 === 0) {
88+
total_days = 31;
89+
} else {
90+
total_days = 30;
91+
}
92+
93+
for (let i = 0; i < total_days; i++) {
94+
const day_element = document.createElement("div");
95+
day_element.classList.add("day");
96+
day_element.textContent = i + 1;
97+
98+
if (
99+
selectedDay == i + 1 &&
100+
selectedYear == year &&
101+
selectedMonth == month
102+
) {
103+
day_element.classList.add("selected");
104+
}
105+
106+
day_element.addEventListener("click", function () {
107+
selectedDate = new Date(year + "-" + (month + 1) + "-" + (i + 1));
108+
selectedDay = i + 1;
109+
selectedMonth = month;
110+
selectedYear = year;
111+
112+
selected_date_ele.textContent = formatDate(selectedDate);
113+
selected_date_ele.dataset.value = selectedDate;
114+
115+
populateDates();
116+
});
117+
118+
days_ele.appendChild(day_element);
119+
}
120+
}
121+
122+
function formatDate(selectedDate) {
123+
let day = selectedDate.getDate();
124+
if (day < 10) {
125+
day = "0" + day;
126+
}
127+
128+
let month = selectedDate.getMonth() + 1;
129+
if (month < 10) {
130+
month = "0" + month;
131+
}
132+
133+
let year = selectedDate.getFullYear();
134+
135+
return day + " / " + month + " / " + year;
136+
}
Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
background-color: black;
9+
font-family: Arial, Helvetica, sans-serif;
10+
}
11+
12+
h1 {
13+
margin: 30px 0px;
14+
color: white;
15+
font-size: 42px;
16+
font-weight: 900;
17+
text-align: center;
18+
}
19+
20+
:root {
21+
--height: 200px;
22+
--boxsize: 5;
23+
}
24+
25+
.date-picker-wrapper {
26+
position: relative;
27+
width: 100%;
28+
max-width: 300px;
29+
height: 60px;
30+
background-color: rgb(58 86 183);
31+
margin: 30px auto;
32+
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.2);
33+
34+
cursor: pointer;
35+
user-select: none;
36+
}
37+
38+
.selected-date {
39+
width: 100%;
40+
height: 100%;
41+
42+
display: flex;
43+
justify-content: center;
44+
align-items: center;
45+
46+
color: white;
47+
font-size: 28px;
48+
}
49+
50+
.dates-container {
51+
visibility: hidden;
52+
top: 100%;
53+
left: 0;
54+
right: 0;
55+
56+
background-color: #fff;
57+
}
58+
59+
.active {
60+
visibility: visible;
61+
}
62+
63+
.month {
64+
display: flex;
65+
justify-content: space-between;
66+
align-items: center;
67+
color: white;
68+
background-color: rgb(58 86 183);
69+
}
70+
71+
.month .arrows {
72+
width: 35px;
73+
height: 35px;
74+
display: flex;
75+
justify-content: center;
76+
align-items: center;
77+
color: white;
78+
font-size: 14px;
79+
}
80+
81+
.month .arrows:hover {
82+
background-color: rgb(91 122 227);
83+
}
84+
85+
.month .arrows:active {
86+
background-color: rgb(91 122 227);
87+
}
88+
89+
.days-container {
90+
display: grid;
91+
grid-template-columns: repeat(7, 1fr);
92+
height: var(--height);
93+
grid-auto-rows: calc(var(--height) / var(--boxsize));
94+
background-color: rgb(54 49 56);
95+
}
96+
.days-container .day {
97+
display: flex;
98+
justify-content: center;
99+
align-items: center;
100+
color: white;
101+
}
102+
103+
.days-container .day:hover {
104+
background-color: rgb(91 122 227);
105+
}
106+
107+
.days-container .day.selected {
108+
background-color: rgb(58 86 183);
109+
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /