قالب های تاریخ در جاوا اسکریپت

امروز می خواهیم در رابطه با انواع قالب های (formatting) تاریخ (شیء Date) در جاوا اسکریپت صحبت کنیم. دانستن این قالب ها برای نمایش صحیح تاریخ به کاربر و همچنین کار با جاوا اسکریپت الزامی است.

ورودی Date

به طور کلی سه قالب مختلف برای ورودی تاریخ در جاوا اسکریپت وجود دارد:

نوع تاریخ	مثال
تاریخ ISO (یا The International Standard)	“2015-03-25”
تاریخ کوتاه	“03/25/2015”
تاریخ بلند	“Mar 25 2015” یا “25 Mar 2015”

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

خروجی Date

فارغ از اینکه قالب ورودی ما چه بوده است، جاوا اسکریپت همیشه تاریخ را به صورت پیش فرض به شکل یک رشته ی کامل و دقیق نشان می دهد:

Wed Mar 25 2015 04:30:00 GMT+0430 (Iran Daylight Time)

تاریخ های ISO در جاوا اسکریپت

استاندارد ISO 8601، استاندارد جهانی و بین المللی برای نمایش تاریخ و ساعت است. syntax (همان ساختار کلی) این استاندارد به شکل (YYYY-MM-DD) است یعنی سال به صورت چهار رقمی، سپس ماه به صورت دو رقمی و سپس روز به صورت دو رقمی که همگی با خط فاصله از هم جدا شده اند.

جاوا اسکریپت نیز این فرمت را ترجیح میدهد و بهتر است شما نیز از همین فرمت استفاده کنید. مثال:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript ISO Dates</h2>

<p id="demo"></p>

<script>
var d = new Date("2015-03-25");
document.getElementById("demo").innerHTML = d;
</script>

</body>
</html>

مقدار خروجی این کد بسته به منطقه ی زمانی (time zone) شما دارد و بین 24 تا 25 مارس خواهد بود (برای ایران 25 مارس است) یعنی:

Wed Mar 25 2015 04:30:00 GMT+0430 (Iran Daylight Time)

تاریخ ISO بدون روز

تاریخ های ISO می توانند بدون روز نوشته شوند -> (YYYY-MM) :

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript ISO Dates</h2>

<p id="demo"></p>

<script>
var d = new Date("2015-03"); 
document.getElementById("demo").innerHTML = d;
</script>

</body>
</html>

بسته به منطقه ی زمانی شما، خروجی این کد می تواند بین 28 فوریه و 1 مارس باشد (اگر در ایران هستید، خروجی اول ماه مارس خواهد بود) یعنی:

Sun Mar 01 2015 03:30:00 GMT+0330 (Iran Standard Time)

تاریخ ISO بدون ماه و روز

تاریخ های ISO را می توانید تنها با ذکر سال بنویسید -> (YYYY):

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript ISO Dates</h2>

<p id="demo"></p>

<script>
var d = new Date("2015");
document.getElementById("demo").innerHTML = d;
</script>

</body>
</html>

خروجی کد باز هم بستگی به منطقه ی زمانی شما دارد اما از این قسمت به بعد ما فرض را بر این می گذاریم که شما در ایران هستید بنابراین خروجی کد اول ژانویه 2015 خواهد بود یعنی:

Thu Jan 01 2015 03:30:00 GMT+0330 (Iran Standard Time)

تاریخ ISO به همراه ساعت

تاریخ های ISO می توانند به همراه ساعت دقیق ذکر شوند که با ساختار کلی (YYYY-MM-DDTHH:MM:SSZ) مشخص می شود:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript ISO Dates</h2>

<p>Separate date and time with a capital T.</p>

<p>Indicate UTC time with a capital Z.</p>

<p id="demo"></p>

<script>
var d = new Date("2015-03-25T12:00:00Z");
document.getElementById("demo").innerHTML = d;
</script>

</body>
</html>

خروجی این کد رشته ی زیر خواهد بود:

Wed Mar 25 2015 16:30:00 GMT+0430 (Iran Daylight Time)

در این قالب باید تاریخ و ساعت را با حرف T (فقط به صورت بزرگ) از هم جدا کنید و بدانید که حرف Z نیز نشان دهنده ی UTC است.

اگر میخواهید زمان را به نسبت UTC تغییر دهید، حرف Z را حذف کرده و به جای آن HH:MM+ و یا HH:MM- را اضافه کنید:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript ISO Dates</h2>

<p>Modify the time relative to UTC by adding +HH:MM or subtraction -HH:MM to the time.</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
new Date("2015-03-25T12:00:00-06:00");
</script>

</body>
</html>

خروجی این کد رشته ی زیر خواهد بود:

Wed Mar 25 2015 22:30:00 GMT+0430 (Iran Daylight Time)

نکته: UTC و GMT یکی هستند و فرقی ندارند (البته به صورت دقیق تر باید گفت که اولی یک استاندارد است و دومی یک منطقه ی زمانی، اما در عمل برای ما فرقی ندارند).

منطقه ی زمانی (Time Zone)

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

بنابراین اگر تاریخ یا ساعتی را در GMT (یا Greenwich Mean Time) تعیین کرده باشید و کاربری از آمریکای مرکزی از سایت بازدید کند، زمان برای او تبدیل به CDT (یا Central US Daylight Time) می شود.

تاریخ های کوتاه

این نوع از قالب بندی تاریخ با ساختار کلی “MM/DD/YYYY” (از چپ به راست) مشخص می شود:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript new Date()</h2>

<p id="demo"></p>

<script>
var d = new Date("03/25/2015");
document.getElementById("demo").innerHTML = d;
</script>

</body>
</html>

خروجی این کد به صورت زیر خواهد بودک

Wed Mar 25 2015 00:00:00 GMT+0430 (Iran Daylight Time)

اخطار: حتما ماه و روز را به صورت دو رقمی قرار دهید (مثلا ماه دوم را به صورت 02 بگذارید، نه 2) چرا که روز ها و ماه های تک رقمی در بعضی از مرورگر ها باعث بروز مشکل می شود. همچنین ساختار “YYYY/MM/DD” (مانند “2015/03/25”) برای بعضی از مرورگر ها ناشناخته است و آن ها سعی می کنند تاریخ را حدس بزنند و برخی نیز NaN برمیگردانند! این مسئله برای ساختار “DD-MM-YYYY” مانند (“25-03-2015”) نیز صادق است.

تاریخ های بلند

این نوع از قالب ها به صورت “MMM DD YYYY” نوشته می شوند:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript new Date()</h2>

<p id="demo"></p>

<script>
var d = new Date("Mar 25 2015");
document.getElementById("demo").innerHTML = d;
</script>

</body>
</html>

خروجی کد رشته ی زیر خواهد بود:

Wed Mar 25 2015 00:00:00 GMT+0430 (Iran Daylight Time)

همچنین باید بدانید که:

ماه و روز می توانند در هر ترتیبی باشند:

var d = new Date("25 Mar 2015");

ماه ها می توانند به صورت کامل (January) یا اختصاری (Jan) نوشته شوند:

var d = new Date("January 25 2015");
var d = new Date("Jan 25 2015");

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