آموزش کامل ساخت و افزودن تقویم فارسی به Input (کامل و استاندارد)

معرفی و اهمیت استفاده از تقویم فارسی در وب

یکی از دغدغه‌های اصلی طراحان و برنامه‌نویسان وب فارسی‌زبان، دریافت تاریخ تولد، تاریخ رزرو یا هر نوع تاریخ شمسی دیگری از کاربر است. متاسفانه تگ پیش‌فرض

< input type="date" / >

در مرورگرها به طور کامل از تقویم جلالی (هجری شمسی) پشتیبانی نمی‌کند. از این رو، ساخت یا استفاده از یک تقویم فارسی (Jalali Datepicker) استاندارد، سبک و بهینه از نظر سئو و تجربه کاربری (UX) اهمیت بسیار زیادی دارد.

در این مقاله آموزشی، یاد می‌گیریم که چطور با استفاده از جاوااسکریپت نوین (ES6) و API قدرتمند Intl در مرورگرها، یک دیت‌پیکر فارسی کاملا ریسپانسیو و بدون نیاز به کتابخانه‌های سنگین جانبی مانند jQuery بسازیم.

چرا نباید از کتابخانه‌های سنگین قدیمی استفاده کنیم؟

در گذشته، بیشتر توسعه‌دهندگان از پلاگین‌های مبتنی بر jQuery برای افزودن تقویم شمسی استفاده می‌کردند. این کار حجم صفحه را به شدت افزایش داده و سرعت بارگذاری سایت را در موبایل کاهش می‌داد. گوگل به شدت روی فاکتورهای Core Web Vitals حساس است؛ بنابراین استفاده از جاوااسکریپت خام (Vanilla JS) بهترین راهکار برای ارتقای رتبه سئو سایت شماست.

ساختار HTML برای فیلد ورودی تاریخ

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

< div class="datepicker-wrapper" >
  < label for="shamsi-date" >انتخاب تاریخ شمسی:< / label >
  < div class="input-container" >
    < input type="text" id="shamsi-date" placeholder="----/--/--" readonly >
    < span class="calendar-icon" >📅< / span >
  < / div >
  < div id="datepicker-calendar" class="datepicker-calendar hidden" >< / div >
< / div >

طراحی استایل زیبا و RTL با CSS

برای اینکه تقویم ما با استانداردهای گوگل و اصول طراحی واکنش‌گرا (Responsive) هماهنگ باشد، از CSS Grid و Flexbox استفاده می‌کنیم. همچنین جهت و چیدمان المان‌ها را راست‌چین (RTL) می‌کنیم تا مناسب زبان فارسی باشد:

.datepicker-wrapper {
  position: relative;
  font-family: 'Vazirmatn', Tahoma, sans-serif;
  direction: rtl;
  width: 100%;
  max-width: 320px;
}
.input-container {
  position: relative;
  display: flex;
  align-items: center;
}
.datepicker-calendar {
  position: absolute;
  top: 100%;
  right: 0;
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: 1000;
  padding: 12px;
  width: 290px;
  margin-top: 8px;
}
.hidden {
  display: none;
}

پیاده‌سازی منطق جاوااسکریپت با شیء Intl

جاوااسکریپت مدرن دارای شیء فوق‌العاده‌ای به نام Intl.DateTimeFormat است که به ما اجازه می‌دهد بدون نیاز به فرمول‌های پیچیده ریاضی، تاریخ میلادی را به شمسی تبدیل کنیم و روزهای ماه را به دست آوریم. در کد زیر، ساختار تقویم را به صورت پویا رندر می‌کنیم:

const dateInput = document.getElementById('shamsi-date');
const calendarEl = document.getElementById('datepicker-calendar');

// گرفتن تاریخ جاری سیستم به شمسی
const getJalaliDateParts = (date) => {
  const formatter = new Intl.DateTimeFormat('fa-IR-u-ca-persian', {
    year: 'numeric', month: 'numeric', day: 'numeric'
  });
  const parts = formatter.formatToParts(date);
  return {
    year: parseInt(parts.find(p => p.type === 'year').value),
    month: parseInt(parts.find(p => p.type === 'month').value),
    day: parseInt(parts.find(p => p.type === 'day').value)
  };
};

نکات دسترسی‌پذیری (Accessibility - A11y) برای گوگل

برای اینکه ربات‌های گوگل و کاربران دارای معلولیت (که از صفحه‌خوان استفاده می‌کنند) بتوانند به راحتی از تقویم شما استفاده کنند، نکات زیر را رعایت کنید:

• استفاده از خاصیت readonly برای اینپوت تا کاربر مجبور به تایپ اشتباه نشود.
• اضافه کردن تگ aria-haspopup="grid" برای مطلع کردن صفحه‌خوان‌ها از باز شدن تقویم.
• طراحی دکمه‌های ناوبری بزرگ (حداقل 44px در 44px) جهت تسهیل کلیک در موبایل بر اساس استانداردهای Lighthouse گوگل.

پیشنمایش