انتشار: آذر 28، 1402
بروزرسانی: 29 اردیبهشت 1404

یاد بگیرید که چگونه یک تقویم ساده جاوا اسکریپت و Datepicker را کدنویسی کنید

ساخت تقویم جاوا اسکریپت بهترین راه برای درک عملکردهای تاریخ در جاوا اسکریپت است. این آموزش یک تقویم بی درنگ شبیه به تقویم دستگاه های دیجیتال شما ایجاد می کند. در پایان، چیزی شبیه به این خواهید داشت:

ساختار HTML

ما تقویم جاوا اسکریپت خود را با ساخت ساختار با HTML و CSS شروع می کنیم. پس از اتمام رابط، عملکرد را با جاوا اسکریپت جایگزین می کنیم.

ساختار HTML حاوی یک هدر خواهد بود که ماه و سال جاری را نشان می دهد. سپس، فلش هایی برای پیمایش به ماه بعدی یا قبل خواهیم داشت و در آخر، یک شبکه خواهیم داشت که نام روزهای یک هفته و هر روز از ماه را نشان می دهد.

 class="container">
   class="calendar">
    
       class="left">◀
       class="header-display">
         class="display">""
      
       class="right">▶
    

     class="week">
      Su
      Mo
      Tu
      We
      Th
      Fr
      Sa
    
     class="days">
        
    
  
    class="display-selected">
         class="selected">
      


درون div با روزهای کلاس، روزهای خود را به صورت پویا با جاوا اسکریپت پر خواهیم کرد.

یک ظاهر طراحی تقویم با CSS

اجازه دهید با اعمال برخی از استایل ها به بدنه و عنصر ظرف شروع کنیم.

ما با تنظیم برخی از متغیرها برای رنگ های خود شروع می کنیم. سپس تقویم در مرکز عنصر ظرف قرار می گیرد و شعاع حاشیه ای برای گرد شدن آن خواهد داشت.

/*variables*/
:root {
  --white: #fff;
  --main: #eaedf0;
  --accent: #0041ff;
  --accent-2: #ebedf0;
}

/*styles*/
body {
  background-color: var(--main);
  display: flex;
  align-items: center;
  justify-content: center;
}
.container {
  display: inline-block;
  background-color: var(--white);
  border-radius: 35px;
  padding: 0 1em;
  margin-top: 2em;
}

عناصر هدر، از جمله a p تگ و دو فلش، از Flexbox با مواردی که در محور x پراکنده شده و به طور مساوی فاصله دارند استفاده می کند.

header {
  margin: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}
.header-display {
  display: flex;
  align-items: center;
}

.header-display p {
  color: var(--accent);
  margin: 5px;
  font-size: 1.2rem;
  word-spacing: 0.5rem;
}

pre {
  padding: 10px;
  margin: 0;
  cursor: pointer;
  font-size: 1.2rem;
  color: var(--accent);
}

طرح بندی شبکه ای تقویم

این divs حاوی نام روزهای یک هفته و روزهای یک ماه از طرح شبکه ای از 7 ستون مساوی استفاده می کند و به صورت افقی در مرکز قرار می گیرد.

.days,
.week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin: auto;
  padding: 0 20px;
  justify-content: space-between;
}
.week div,
.days div {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 3rem;
  width: 3em;
  border-radius: 100%;
}

همچنین در هر روز هفته یک افکت شناور و یک کدورت به نام روزهای هفته اضافه می کنیم.

.days div:hover {
  background: var(--accent-2);
  color: rgb(25, 25, 201);
  cursor: pointer;
}
.week div {
  opacity: 0.5;
}

ما همچنین تاریخ کلیک روی یک روز در تقویم را نمایش می دهیم و رنگ پس زمینه را برای تاریخ امروز اعمال می کنیم.

.current-date {
  background-color: var(--accent);
  color: var(--white);
}
.display-selected {
  margin-bottom: 10px;
  padding: 20px 20px;
  text-align: center;
}

عملکرد تقویم جاوا اسکریپت

خوب، این ساختار ما را به ما داده است، حالا بیایید روی رفتار تمرکز کنیم. ما با انتخاب تمام عناصری که باید به روز شوند شروع می کنیم.

let display = document.querySelector(".display");
let previous = document.querySelector(".left");
let next = document.querySelector(".right");
let days = document.querySelector(".days");
let selected = document.querySelector(".selected");

Date() Object

جاوا اسکریپت با یک داخلی ارائه می شود Date() شیئی که کار با خرما را آسان می کند. برای دریافت تاریخ جاری، می توانید از new Date() شی مانند این:

1	let dateToday = new Date();
2	let dateToday = new Date()
3	console.log(dateToday);

همچنین می توانید از روش های شیء تاریخ برای دریافت قسمت های مختلف تاریخ مانند سال، ماه، روز هفته و غیره استفاده کنید.

console.log(dateToday.getFullYear()); //2023
console.log(dateToday.getMonth()); //11  
console.log(dateToday.getDate());  //12
console.log(dateToday.getHours()); //13
console.log(dateToday.getMinutes()); //9
console.log(dateToday.getSeconds());//35

یک نکته مهم که باید در هنگام کار با آن توجه داشته باشید Date() شیء است، ماه ها بر اساس صفر هستند، به این معنی که ژانویه با 0، فوریه با 1، و غیره نشان داده می شود. بنابراین، خروجی ما برای get.Month()، که برابر با 11 است، یعنی ما در ماه دسامبر هستیم.

با تعریف یک متغیر شروع کنید date از شی Date استفاده کنید و مقادیر ماه و سال را بدست آورید.

1	let year = date.getFullYear();
2	let month = date.getMonth();

یک تابع به نام ایجاد کنید displayCalendar و هدر را برای نمایش ماه و سال جاری به روز کنید.

let formattedDate = date.toLocaleString("en-US", {
  month: "long",
  year: "numeric",
});
display.innerHTML = `${formattedDate}`;

فراخوانی کنید displayCalendar() عملکرد برای نمایش عملکرد هدر. اکنون هدر ماه و سال جاری را نمایش می دهد.

نمایش تقویم

بعد، به روز رسانی کنید displayCalendar() عملکرد به شرح زیر است:

function displayCalendar() {

    const firstDay = new Date(year, month, 1);
    const firstDayIndex = firstDay.getDay(); 

    const lastDay = new Date(year, month + 1, 0);
    const numberOfDays = lastDay.getDate(); 

}

const firstDay = new Date(year, month, 1);: یک شیء Date جدید که نشان دهنده اولین روز ماه جاری است ایجاد می کند.
const firstDayIndex = firstDay.getDay();: در اینجا از مقدار استفاده می کنیم firstDay برای بدست آوردن شاخص روز اول هفته به عنوان مثال، 0 نشان دهنده یکشنبه، 1 نشان دهنده دوشنبه و غیره است.
const lastDay = new Date(year, month + 1, 0);: یک شیء Date جدید ایجاد می کند که نشان دهنده آخرین روز ماه جاری است.
const numberOfDays = lastDay.getDate();: در اینجا از مقدار استفاده می کنیم lastDay برای بدست آوردن شاخص آخرین روز ماه. این مقدار به ما امکان می دهد روزهای دقیق یک ماه را بدست آوریم. به عنوان مثال، اگر یک ماه 31 روز داشته باشد، numberOfDays 31 خواهد بود

از ارزش firstDayIndex، می دانیم اولین روز ماه چه زمانی شروع می شود. به عنوان مثال، برای دسامبر 2023، اولین روز ماه با شاخص 5 در روز جمعه شروع می شود. تقویم باید از نمایه 0 (یکشنبه) تا نمایه 4 (پنجشنبه) خالی باشد. استفاده کنیم firstDayIndex برای ایجاد یک حلقه for که div های خالی را به شروع تقویم اضافه می کند.

for (let x = 1; x <= firstDayIndex; x++) {
  let div = document.createElement("div");
  div.innerHTML += "";

  days.appendChild(div);
}

برای نمایش روزها در یک ماه، حلقه for دیگری ایجاد می کنیم که div هایی برابر با مقدار اضافه می کند numberOfDays. هر div همچنین حاوی روز ماه است که به درستی با روز هفته مطابقت دارد.

for (let i = 1; i <= numberOfDays; i++) {
  let div = document.createElement("div");
  let currentDate = new Date(year, month, i);

  div.dataset.date = currentDate.toDateString();

  div.innerHTML += i;
  days.appendChild(div);
  if (
    currentDate.getFullYear() === new Date().getFullYear() &&
    currentDate.getMonth() === new Date().getMonth() &&
    currentDate.getDate() === new Date().getDate()
  ) {
    div.classList.add("current-date");
  }
}

این for حلقه کارهای زیر را انجام می دهد:

عناصر div را ایجاد می کند که هر روز را در یک ماه نشان می دهد
یک ویژگی مجموعه داده به نام date را به هر div اضافه می کند که حاوی تاریخ مطابق با روز، ماه و سال جاری است. زمانی که بخواهیم تعیین کنیم روی کدام تاریخ کلیک شده است، ویژگی داده مفید خواهد بود.
هر div را به عنصر روزهای ما اضافه می کند.
ما همچنین یک کلاس CSS متفاوت به div اضافه می کنیم که با تاریخ فعلی مطابقت دارد.

اکنون، تقویم جاوا اسکریپت ما تاریخ صحیح را نشان می دهد.

انتخاب تاریخ

همچنین می خواهیم وقتی روی یک روز کلیک می شود، رویداد کلیک را گوش دهیم و کارهای زیر را انجام دهیم:

را بازیابی کنید currentDate مقدار از ویژگی داده عنصر کلیک شده
تاریخ انتخاب شده را روی صفحه نمایش دهید.

function displaySelected() {
  const dayElements = document.querySelectorAll(".days div");
  dayElements.forEach((day) => {
    day.addEventListener("click", (e) => {
      const selectedDate = e.target.dataset.date;
      selected.innerHTML = `Selected Date : ${selectedDate}`;
    });
  });
}
displaySelected();

در کد بالا، عناصر روز را تکرار می کنیم و به هر عنصر div یک شنونده رویداد کلیکی اختصاص می دهیم. پس از کلیک کردن، تاریخ فعلی را از ویژگی data-date بازیابی می کنیم و عنصر نمایش را با تاریخ فعلی قالب بندی شده به روز می کنیم.

این displaySelected() سپس تابع فراخوانی می شود.

وقتی روی هر تاریخی کلیک می کنید باید برچسب زیر را در پایین رابط کاربری مشاهده کنید.

عملکرد نهایی جاوا اسکریپت تقویم

عملکرد نهایی اطمینان از نمایش ماه و سال صحیح با کلیک بر روی عناصر قبلی و بعدی است.

previous.addEventListener("click", () => {
  days.innerHTML = "";
  selected.innerHTML = "";

  if (month < 0) {
    month = 11;
    year = year - 1;
  }

  month = month - 1;
  console.log(month);
  date.setMonth(month);


  displayCalendar();
  displaySelected();
});

در کد بالا:

\xa0days.innerHTML = ""; : محتوای عناصر div HTML را برای ماه جاری پاک می کند.
selected.innerHTML=""; : محتویات را پاک می کند currentDate.
در حلقه for، ابتدا بررسی می کنیم که آیا ماه جاری کمتر از 0 (ژانویه) است یا خیر. اگر درست باشد، ماه را دسامبر قرار می دهیم (دسامبر دارای شاخص 11 است) و همچنین سال را 1 کاهش می دهیم. اگر غلط باشد، فقط ماه را کاهش می دهیم.
dateToday.setMonth(month); : ماه را روی ماه به روز شده جدید تنظیم می کند. در نهایت، ما را فراخوانی می کنیم displayCalendar() و displaySelected() کارکرد.

برای عنصر بعدی، بررسی می کنیم که آیا ماه بزرگتر از 11 (دسامبر) است و اگر درست باشد، ماه را روی 0 قرار می دهیم و سال را به سال بعد افزایش می دهیم. در غیر این صورت، ماه را 1 افزایش می دهیم.

next.addEventListener("click", () => {
  days.innerHTML = "";
  selected.innerHTML = "";

  if (month > 11) {
    month = 0;
    year = year + 1;
  }

  month = month + 1;
  date.setMonth(month);

  displayCalendar();
  displaySelected();
});

نتیجه

در این آموزش نحوه استفاده از جاوا اسکریپت برای ایجاد یک تقویم کاملاً کاربردی به صورت پویا توضیح داده شده است. امیدواریم چیزهای زیادی یاد گرفته باشید و اکنون در موقعیتی هستید که می توانید تقویم های جاوا اسکریپت پویا برای اهداف مختلف ایجاد کنید!

منبع: https://webdesign.tutsplus.com/learn-how-to-code-a-simple-javascript-calendar-and-datepicker--cms-108322t

1	class="container">
2	class="calendar">
3
4	class="left">◀
5	class="header-display">
6	class="display">""
7
8	class="right">▶
9
10
11	class="week">
12	Su
13	Mo
14	Tu
15	We
16	Th
17	Fr
18	Sa
19
20	class="days">
21
22
23
24	class="display-selected">
25	class="selected">
26
27

1	/variables/
2	:root {
3	--white: #fff;
4	--main: #eaedf0;
5	--accent: #0041ff;
6	--accent-2: #ebedf0;
7	}
8
9	/styles/
10	body {
11	background-color: var(--main);
12	display: flex;
13	align-items: center;
14	justify-content: center;
15	}
16	.container {
17	display: inline-block;
18	background-color: var(--white);
19	border-radius: 35px;
20	padding: 0 1em;
21	margin-top: 2em;
22	}

1	header {
2	margin: 20px;
3	display: flex;
4	justify-content: space-between;
5	align-items: center;
6	padding: 10px;
7	}
8	.header-display {
9	display: flex;
10	align-items: center;
11	}
12
13	.header-display p {
14	color: var(--accent);
15	margin: 5px;
16	font-size: 1.2rem;
17	word-spacing: 0.5rem;
18	}
19
20	pre {
21	padding: 10px;
22	margin: 0;
23	cursor: pointer;
24	font-size: 1.2rem;
25	color: var(--accent);
26	}

1	.days,
2	.week {
3	display: grid;
4	grid-template-columns: repeat(7, 1fr);
5	margin: auto;
6	padding: 0 20px;
7	justify-content: space-between;
8	}
9	.week div,
10	.days div {
11	display: flex;
12	justify-content: center;
13	align-items: center;
14	height: 3rem;
15	width: 3em;
16	border-radius: 100%;
17	}

1	.days div:hover {
2	background: var(--accent-2);
3	color: rgb(25, 25, 201);
4	cursor: pointer;
5	}
6	.week div {
7	opacity: 0.5;
8	}

1	.current-date {
2	background-color: var(--accent);
3	color: var(--white);
4	}
5	.display-selected {
6	margin-bottom: 10px;
7	padding: 20px 20px;
8	text-align: center;
9	}

1	let display = document.querySelector(".display");
2	let previous = document.querySelector(".left");
3	let next = document.querySelector(".right");
4	let days = document.querySelector(".days");
5	let selected = document.querySelector(".selected");

1	console.log(dateToday.getFullYear()); //2023
2	console.log(dateToday.getMonth()); //11
3	console.log(dateToday.getDate()); //12
4	console.log(dateToday.getHours()); //13
5	console.log(dateToday.getMinutes()); //9
6	console.log(dateToday.getSeconds());//35

1	let formattedDate = date.toLocaleString("en-US", {
2	month: "long",
3	year: "numeric",
4	});
5	display.innerHTML = `${formattedDate}`;

1	function displayCalendar() {
2
3	const firstDay = new Date(year, month, 1);
4	const firstDayIndex = firstDay.getDay();
5
6	const lastDay = new Date(year, month + 1, 0);
7	const numberOfDays = lastDay.getDate();
8
9	}

1	for (let x = 1; x <= firstDayIndex; x++) {
2	let div = document.createElement("div");
3	div.innerHTML += "";
4
5	days.appendChild(div);
6	}

1	for (let i = 1; i <= numberOfDays; i++) {
2	let div = document.createElement("div");
3	let currentDate = new Date(year, month, i);
4
5	div.dataset.date = currentDate.toDateString();
6
7	div.innerHTML += i;
8	days.appendChild(div);
9	if (
10	currentDate.getFullYear() === new Date().getFullYear() &&
11	currentDate.getMonth() === new Date().getMonth() &&
12	currentDate.getDate() === new Date().getDate()
13	) {
14	div.classList.add("current-date");
15	}
16	}

1	function displaySelected() {
2	const dayElements = document.querySelectorAll(".days div");
3	dayElements.forEach((day) => {
4	day.addEventListener("click", (e) => {
5	const selectedDate = e.target.dataset.date;
6	selected.innerHTML = `Selected Date : ${selectedDate}`;
7	});
8	});
9	}
10	displaySelected();

1	previous.addEventListener("click", () => {
2	days.innerHTML = "";
3	selected.innerHTML = "";
4
5	if (month < 0) {
6	month = 11;
7	year = year - 1;
8	}
9
10	month = month - 1;
11	console.log(month);
12	date.setMonth(month);
13
14
15	displayCalendar();
16	displaySelected();
17	});

1	next.addEventListener("click", () => {
2	days.innerHTML = "";
3	selected.innerHTML = "";
4
5	if (month > 11) {
6	month = 0;
7	year = year + 1;
8	}
9
10	month = month + 1;
11	date.setMonth(month);
12
13	displayCalendar();
14	displaySelected();
15	});