خانه آموزش زبان جاوااسکریپت آموزش JS پیشرفته کار با تاریخ و ساعت در جاوااسکریپت

کار با تاریخ و ساعت در جاوااسکریپت

توسط

۱۳۹۹-۰۸-۰۹

این آموزش در تاریخ ۱۴۰۱/۰۳/۳۱ آپدیت شده است.

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

کار با تاریخ و ساعت در جاوااسکریپت

Free-Learn

آنچه در این جلسه میخوانید :

1 کار با تاریخ و ساعت در جاوااسکریپت
2 نحوه نمایش تاریخ و ساعت در جاوااسکریپت چگونه می باشد
3 نحوه ایجاد یا تعریف تاریخ و ساعت
4 ایجاد تاریخ و ساعت از طریق تاریخ و ساعت فعلی سیستم
5 ایجاد تاریخ و ساعت از طریق چیزی که خودمون تعریف میکنیم
6 ایجاد تاریخ و ساعت از طریق میلی ثانیه
7 ایجاد تاریخ و ساعت بصورت رشته ای
8 مثال های بیشتر

کار با تاریخ و ساعت در جاوااسکریپت

در زبان جاوااسکریپت یک شئ داریم به اسم Date ، که با استفاده از این شئ میتونیم بروی تاریخ و ساعت کار کنیم، یعنی مثلا تاریخ و ساعت رو نمایش بدیم یا هم میتونیم با استفاده از متدهایی که داره عملیات بروی تاریخ و ساعت انجام بدیم.

پس اینجوری میتونیم بگیم که تاریخ یا Date در زبان جاوااسکریپت بطور کلی شئ یا Object هستند ، ( همونطور که در جلسات قبلی اشاره کردم زبان جاوا اسکریپت مبتنی بر شئ می باشد )

Free-Learn

نحوه نمایش تاریخ و ساعت در جاوااسکریپت چگونه می باشد

جاوااسکریپت تاریخ و ساعت رو بصورت میلی ثانیه میبینه و ذخیره میکنه ، یعنی بطور کلی اینو بدونید تاریخ و ساعت در جاوااسکریپت بصورت میلی ثانیه ذخیره میشه.

و اینم بدونید دیگه در یه کلام ، جاوااسکریپت تاریخ و ساعت رو از تاریخ و ساعت January 01, 1970, 00:00:00 تا به الان محاسبه میکنه، یا اینجوریم میتونیم بگیم که تاریخ و ساعت حال حاضر یعنی تعداد میلی ثانیه هایی که از تاریخ و ساعت January 01, 1970, 00:00:00 تا به الان سپری شده.

شاید براتون جالب باشه که از سال ۱۹۷۰ تا سال ۲۰۲۲ تقریبا ۱,۶۵۵,۸۰۱,۸۶۰,۷۰۶ میلی ثانیه گذشته. [ منبع ]

پس مثلا اگه یه عددی مثه ۱۰۰۰۰۰۰۰۰۰۰۰۰ ( میلی ثانیه ) بهش بدیم این میاد و از تاریخ ۰۱,۰۱,۱۹۷۰ تا به الان ( حال حاضر ) همین عدد رو محاسبه میکنه و بصورت تاریخ و ساعت به ما نشونش میده.

یعنی همین عدد ۱۰۰۰۰۰۰۰۰۰۰۰۰ تقریبا میشه سال ۲۰۰۱ و ماه سپتامبر و روز ۰۹

<script>

var MyDate = new Date(1000000000000);
document.write( MyDate );

</script>

var MyDate = new Date(1000000000000);

document.write( MyDate );

</script>

امتحان کنید

مثال شماره ۲ : بدست آوردن تعداد میلی ثانیه سپری شده از تاریخ ۰۱,۰۱,۱۹۷۰ تا حال حاضر ( همین لحظه ) با استفاده از متد ()getTime ( نگران نباشید در جلسه بعدی با متدها آشنا میشید )

<script>

var MyDate = new Date();
var My_MilliSecond = MyDate.getTime();

document.write( My_MilliSecond );

</script>

var MyDate = new Date();

var My_MilliSecond = MyDate.getTime();

document.write( My_MilliSecond );

</script>

امتحان کنید

Free-Learn

نحوه ایجاد یا تعریف تاریخ و ساعت

برای ایجاد یا تعریف تاریخ و ساعت در زبان جاوااسکریپت ۴ روش وجود دارد که این روش ها به شرح زیر می باشند : یعنی دیگه بطور کلی بدونید ما میتونیم از روش های زیر تاریخ و ساعت رو یا خودمون ایجادش کنیم یا تاریخ و ساعت فعلی سیستمو ازش بگیریم.

new Date()
new Date(Year, Month, Day, Hour, Minute, Second, Millisecond)
new Date(Millisecond)
new Date(Date_String)

توضیح هر یک از روش های بالا :

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

Free-Learn

ایجاد تاریخ و ساعت از طریق تاریخ و ساعت فعلی سیستم

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

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

در این حالت بصورت پیش فرض منطقه زمانی مرورگر مورد استفاده قرار میگیرد. ( مثلا اگه شما داخل ایران باشید پس میشه منطقه زمانی همینجا و اگه خارج از ایران باشید میشه منطقه زمانی همونجایی که داخلش هستید )

مثال : نمایش تاریخ و ساعت فعلی سیستم خودتون ( هرچی تاریخ و ساعت سیستم تون بود اینم نشونش میده )

<script>

var MyDate = new Date();
document.write( MyDate );

</script>

var MyDate = new Date();

document.write( MyDate );

</script>

امتحان کنید

Free-Learn

ایجاد تاریخ و ساعت از طریق چیزی که خودمون تعریف میکنیم

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

پس یعنی در این روش ما میتونیم ۷ پارامتر ( سال و ماه و روز و ساعت و دقیقه و ثانیه و میلی ثانیه ) رو از سمت چپ به راست و به ترتیب ،به دلخواه خودمون مشخص کنیم.

توجه داشته باشید که جاوااسکریپت همیشه ماه رو از ۰ تا ۱۱ حساب میکنه، یعنی ژانویه ( January ) میشه ۰ و دسامبر ( December ) میشه ۱۱

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

اگه فقط یک پارامتر استفاده نمایید جاوااسکریپت بصورت خودکار اونو بصورت میلی ثانیه حساب میکنه.

مثال شماره ۱ : عدم استفاده از پارامترهای ساعت ، دقیقه ، ثانیه و میلی ثانیه ( جاوااسکریپت دیگه خودش خودکار اونارو ۰ میندازه )

<script>

var MyDate = new Date(1992,05,15);
document.write( MyDate );

</script>

var MyDate = new Date(1992,05,15);

document.write( MyDate );

</script>

امتحان کنید

مثال شماره ۲ : تعریف و نمایش تاریخ سال ۱۹۹۲ و ماه ۰۵ و روز ۱۵ و ساعت ۲۰ و دقیقه ۰۰ و ثانیه ۰۰ و ۰ میلی ثانیه

<script>

var MyDate = new Date(1992,05,15,20,00,00,0);
document.write( MyDate );

</script>

var MyDate = new Date(1992,05,15,20,00,00,0);

document.write( MyDate );

</script>

امتحان کنید

مثال شماره ۳ :یک تاریخ خودمون براش تعریف کردیم بعدش مقایسه میکنیم با تاریخ امروز ، اگه گذشته بود خب یه پیغام بده و اگه هنوز وقتش نرسیده یه پیغام دیگه

<script>

var CurrentDate = new Date();
var MyDate = new Date(2023,05,10,20,00,00);

document.getElementById("Current_Date").innerHTML = CurrentDate;
document.getElementById("MyCustom_Date").innerHTML = MyDate;
var Result = document.getElementById("Result");

if( CurrentDate > MyDate ){
 Result.innerHTML = "خیلی وقته که گذشته";
}
else{
 Result.innerHTML = "هنوز وقتش نرسیده";
}

</script>

var CurrentDate = new Date();

var MyDate = new Date(2023,05,10,20,00,00);

document.getElementById("Current_Date").innerHTML = CurrentDate;

document.getElementById("MyCustom_Date").innerHTML = MyDate;

var Result = document.getElementById("Result");

if( CurrentDate > MyDate ){

Result.innerHTML = "خیلی وقته که گذشته";

}

else{

Result.innerHTML = "هنوز وقتش نرسیده";

}

</script>

امتحان کنید

توضیح مثال بالا :

خب در خط ۳ خیلی راحت تاریخ و ساعت جاری ( فعلی / حال حاضر ) سیستم رو گرفتیم و در خط ۴ هم که مشخصه به دلخواه خودمون یک تاریخ و ساعت تعریف کردیم.

در خط ۶ و ۷ تاریخ و ساعت فعلی سیستم و اون چیزی که دلخواه تعریف کرده بودیم رو در خروجی نمایش دادیم که کاربر ببینه که تاریخ فعلی چیه و تاریخ دلخواه چیه

در نهایت خط ۱۰ با استفاده از دستور شرطی IF و عملگر مقایسه ای تعریف کردیم که اگه تاریخ فعلی بزرگتر از تاریخ دلخواه بود خب پیغام بده ” خیلی وقته که گذشته ” و اگه نبود قربون دستت پیغام بده ” هنوز وقتش نرسیده ”

Free-Learn

ایجاد تاریخ و ساعت از طریق میلی ثانیه

خب همونطور که در ابتدای این جلسه اشاره کردم جاوااسکریپت تاریخ و ساعت رو بطور پیش فرض بصورت میلی ثانیه ( یا به انگلیسی Millisecond ) محاسبه و ذخیره میکنه.

حتی اشاره کردم که در جاوااسکریپت زمان ( تاریخ و ساعت ) از تاریخ و ساعت سال ۱۹۷۰ ، روز ۰۱ و ماه ۰۱ و ساعت ۰۰ و دقیقه ۰۰ و ثانیه ۰۰ تا به الان محاسبه میشه.

هر یک روز ( ۲۴ ساعت ) برابر است با ۸۶,۴۰۰,۰۰۰ میلی ثانیه

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

<script>

var MyDate1 = new Date(1300000000000);
var MyDate2 = new Date(1600000000000);
var MyDate3 = new Date(1900000000000);

document.write( MyDate1 );
document.write("<br>");
document.write( MyDate2 );
document.write("<br>");
document.write( MyDate3 );

</script>

var MyDate1 = new Date(1300000000000);

var MyDate2 = new Date(1600000000000);

var MyDate3 = new Date(1900000000000);

document.write( MyDate1 );

document.write("<br>");

document.write( MyDate2 );

document.write("<br>");

document.write( MyDate3 );

</script>

امتحان کنید

Free-Learn

ایجاد تاریخ و ساعت بصورت رشته ای

تو این روش ما میتونیم تاریخ و ساعت رو خودمون به دلخواه خودمون و بصورت رشته ای ( String ) تعریف کنیم. ( پیشنهاد میکنم حتما آموزش کار با داده های رشته ای رو مشاهده نمایید )

اینکه میگیم رشته ای ، فک کنم دیگه خودتون بدونید ( یعنی باید تاریخ و ساعت رو درون دابل کوتیشن یا ” ” یا تک کوتیشن یا ‘ ‘ قرار بدیم )

مثال شماره ۱ : ایجاد سال ۲۰۱۵ ، ماه اُکتبر و روز ۱۶ ام و ساعت ۱۰ تمام

<script>

var MyDate = new Date("October 16, 2015 10:00:00");
document.write( MyDate );

</script>

var MyDate = new Date("October 16, 2015 10:00:00");

document.write( MyDate );

</script>

امتحان کنید

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

// معتبر و صحیح می باشند

new Date("3 march 2015");

new Date("October,16,2015 10:00:00");

new Date("01/16/2015");

new Date("3 February, 2015");

new Date("2015 3 February");

new Date("3 2015 February");

new Date("February 3 2015");

new Date("February 2015 3");

new Date("2 3 2015");

new Date("3 march 2015 20:21:44");


// نامعتبر و غلط می باشند

new Date("3rd February, 2015");

new Date("October-16-2015 10:00:00");

new Date("01/16/2015 20/22/22");

// معتبر و صحیح می باشند

new Date("3 march 2015");

new Date("October,16,2015 10:00:00");

new Date("01/16/2015");

new Date("3 February, 2015");

new Date("2015 3 February");

new Date("3 2015 February");

new Date("February 3 2015");

new Date("February 2015 3");

new Date("2 3 2015");

new Date("3 march 2015 20:21:44");

// نامعتبر و غلط می باشند

new Date("3rd February, 2015");

new Date("October-16-2015 10:00:00");

new Date("01/16/2015 20/22/22");

Free-Learn

مثال های بیشتر

مثال شماره ۱ : بدست آوردن تاریخ شمسی / فارسی

<script>

var MyDate = new Date().toLocaleDateString('fa-IR');
document.write( MyDate );

</script>

var MyDate = new Date().toLocaleDateString('fa-IR');

document.write( MyDate );

</script>

امتحان کنید

مثال شماره ۲ : استفاده از کتابخانه ( jdf.scr.ir ) ( پیشنهاد میکنم شماهم از این استفاده کنید )

<script>

function gregorian_to_jalali(gy, gm, gd) {
  var g_d_m, jy, jm, jd, gy2, days;
  g_d_m = [0, 31, 59, 90, 120, 151, 181, 212, 243, 273, 304, 334];
  gy2 = (gm > 2) ? (gy + 1) : gy;
  days = 355666 + (365 * gy) + ~~((gy2 + 3) / 4) - ~~((gy2 + 99) / 100) + ~~((gy2 + 399) / 400) + gd + g_d_m[gm - 1];
  jy = -1595 + (33 * ~~(days / 12053));
  days %= 12053;
  jy += 4 * ~~(days / 1461);
  days %= 1461;
  if (days > 365) {
    jy += ~~((days - 1) / 365);
    days = (days - 1) % 365;
  }
  if (days < 186) {
    jm = 1 + ~~(days / 31);
    jd = 1 + (days % 31);
  } else {
    jm = 7 + ~~((days - 186) / 30);
    jd = 1 + ((days - 186) % 30);
  }
  return [jy, jm, jd];
}

MyDate = new Date();
Year = MyDate.getFullYear();
Month = MyDate.getMonth()+1;
Day = MyDate.getDate();

Tarikh_Shamci = gregorian_to_jalali( Year , Month , Day );
Result.innerHTML = Tarikh_Shamci[0]+'/'+Tarikh_Shamci[1]+'/'+Tarikh_Shamci[2];

</script>

function gregorian_to_jalali(gy, gm, gd) {

var g_d_m, jy, jm, jd, gy2, days;

g_d_m = [0, 31, 59, 90, 120, 151, 181, 212, 243, 273, 304, 334];

gy2 = (gm > 2) ? (gy + 1) : gy;

days = 355666 + (365 * gy) + ~~((gy2 + 3) / 4) - ~~((gy2 + 99) / 100) + ~~((gy2 + 399) / 400) + gd + g_d_m[gm - 1];

jy = -1595 + (33 * ~~(days / 12053));

days %= 12053;

jy += 4 * ~~(days / 1461);

days %= 1461;

if (days > 365) {

jy += ~~((days - 1) / 365);

days = (days - 1) % 365;

}

if (days < 186) {

jm = 1 + ~~(days / 31);

jd = 1 + (days % 31);

} else {

jm = 7 + ~~((days - 186) / 30);

jd = 1 + ((days - 186) % 30);

}

return [jy, jm, jd];

}

MyDate = new Date();

Year = MyDate.getFullYear();

Month = MyDate.getMonth()+1;

Day = MyDate.getDate();

Tarikh_Shamci = gregorian_to_jalali( Year , Month , Day );

Result.innerHTML = Tarikh_Shamci[0]+'/'+Tarikh_Shamci[1]+'/'+Tarikh_Shamci[2];

</script>

امتحان کنید

Free-Learn

دریافت PDF یا پرینت این مطلب

کار با تاریخ و ساعت در جاوااسکریپت

Free-Learn

کار با تاریخ و ساعت در جاوااسکریپت

Free-Learn

نحوه نمایش تاریخ و ساعت در جاوااسکریپت چگونه می باشد

Free-Learn

نحوه ایجاد یا تعریف تاریخ و ساعت

Free-Learn

ایجاد تاریخ و ساعت از طریق تاریخ و ساعت فعلی سیستم

Free-Learn

ایجاد تاریخ و ساعت از طریق چیزی که خودمون تعریف میکنیم

Free-Learn

ایجاد تاریخ و ساعت از طریق میلی ثانیه

Free-Learn

ایجاد تاریخ و ساعت بصورت رشته ای

Free-Learn

مثال های بیشتر

Free-Learn

آموزش پیشرفته جاوااسکریپت

کار با توابع یا Functions در جاوا اسکریپت

کار با اشیاء یا Objects در جاوااسکریپت

آموزش مدیریت خطاها در جاوا اسکریپت

کار با آرایه ها یا Arrays در جاوااسکریپت

کار با متدهای آرایه ها در جاوااسکریپت

کار با تاریخ و ساعت در جاوااسکریپت

کار با متدهای گرفتنی یا Get در تاریخ و ساعت

کار با متدهای ست کردنی یا Set در تاریخ و ساعت

آموزش صفت Enctype در HTML