برای اطلاع از آپدیت دوره ها و تخفیف ها عضو کانال اطلاع رسانی ما بشید ما شوید !
02128428905
0

ُُساخت تقویم فارسی با جاوا اسکریپت (۲۰۲۰)

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

پس همراهمون باشین. ما میتونیم این تقویم رو با خود جاوااسکریپت هم بنویسیم اما کار رو کمی پیچیده میکنه به همین خاطر این پروژه رو با یکی از فریمورک ها و کتابخونه های جاوااسکریپت  اموزشی که در ویدئو تماشا میکنین تصمیم گرفته شده که این تقویم بوسیله ی  یکی از کتابخونه ها یا فریمورک های جاوااسکریپت برای راحی بیشتر استفاده بشه که از جیکوئری استفاده کردیم.

 

 ساخت تقویم فارسی در جاوا اسکریپت با جی کوئری

 

ُُساخت تقویم فارسی با جی کوئری

 

خب همون طور که در ویدئو توضیح داده شده برای پیدا کردن تقویم فارسی در سطح نت کافیه که persian datepicker  رو سرچ کنین که با تعداد زیادی تقویم روبرو میشین و با مطالعه ی داکیومنت اون ها ازشون استفاده کنین. که در ویدئوی بالا یک تقویمی انتخاب شده و تمامی داکیومنت اون مورد بررسی قرار گرفته شده.

 

لینک  پلاگینی که داخل ویدئو  گفته شده:

 

https://www.jqueryscript.net/time-clock/Persian-Jalali-Calendar-Data-Picker-Plugin-With-jQuery-kamaDatepicker.html

 

وارد لینک گفته شده بشین و از روی قسمت download اون رو دانلود کنین و البته قبل از اون وارد دمو ی اون بشین تا هم مدل تقویم استفاده شده رو ببینید و هم روش استفاده ش رو مطالعه کنین که البته تصویرش رو در پایین مشاهده میکنین:

 

 

ُُساخت تقویم فارسی با جی کوئری

 

ایجاد فایل:

 

فایلی رو داخل ide یا text editor  یا هرچیز دیگه ای ایجاد میکنیم. فایل های kamadatepicker.min.js , kamadatepicker.min.css رو داخل فایل html مون attach میکنیم.

که کاملا در ویدئو توضیح داده شده و دیگه بیشتر از این راجبش نمیگیم.

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

/https://jquery.com/download

  .است html  رو قرار میدیم که تقویم خام در <input  type=”date”>   بعد از لینک کردن جیکوئری

که ما سفارش سازی اون رو میخایم.پس برای این کار همون طور که در تصویر بالا میبینید  input  قبلی رو پاک میکنیم و input جدید رو با “type=”text

قرار میدیم.و به اون یک ایدی هم میدیم.

</ “input type=”text”   id=”demo >

 

و طبق تصویر بالا باید این ایدی رو به kamaDatepicker  داخل فایل جاوااسکریپت بفرستیم. یعنی:

 

(“kamaDatepicker(“demo

 

خب همون طور که در خروجی  مشاهده میکنین یک تقویم به ما نمایش داده میشه که به درستی کار میکنه.

 

آموزش جاوا اسکریپت رایگان

البته حالت پیشفرض هست و میخایم اون رو شخصی سازیش کنیم.

 

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

 

 

 

که هرکدوم قابلیت و کاراریی خودشون رو دارن  که دوتای اون رو در vscode نوشتم و عکسش رو میبینین:

شخصی سازی تقویم:

که placeholder  نوشته ی داخل input رو نشون میده که برای اون کلمه ی تاریخ رو در نظر گرفتیم و twodigit که برابر با false شده باعث میشه عدد صفر ماقبل عدد های تک رقمی حذف بشه.

 

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

که برای اعمال این موارد هم مثل تصویر بالا nextButtonIcon رو به عنوان پراپرتی درون ابجکتمون اضافه میکنیم و جلوی اون ادرس عکس مربوط به کلمه ی بعدی رو بهش میدیم. و به همین ترتیب برای کلمه ی بعدی هم از priviousButtonIcon  استفاده میکنیم.

 

برای تغییر رنگ ایکون ها پراپرتی buttonsColor  رو میذاریم و میتونیم اسم رنگ یا کد رنگ رو هم بهش بدیم.

 

میتونیم اعداد داخل تقویم رو به فارسی تبدیل کنیم برای این کار از forceFasiDigits استفاده میکنیم که باید مقدارش رو برابر با true قرار بدیم.

 

برای اینکه تاریخ روزی که هستیم رو برامون  مشخص بکنه که تقویم رو حرفه ای تر نشون میده از markToday  رو با مقدار true قرارش میدیم.

 

برای قرمز کردن روز های تعطیل هم از markHolidays استفاده میکنیم و اون رو مثل بقیه به عنوان پراپرتی ابجکتمون قرار میدیم و مقدارش رو true میگذاریم.

 

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

 

امیدوارم مورد توجهتون قرار گرفته باشه. روزتون خوش. زهرا شوشتری

ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *