dateTimePicker جلالی و میلادی برای AngularJS

dateTimePicker جلالی و میلادی برای AngularJS

بیشتر اوقات برنامه‌ای که در حال توسعه آن هستیم نیازمند یک سیستم DateTimePicker برای تاریخ جلالی/میلادی هست. ما می توانیم DateTimePicker شخصی خود را درست و به برنامه اضافه کنیم یا اینکه از ماژول‌های آماده ای که توسط توسعه دهندگان ساخته می شود استفاده کنیم.


 

معرفی ماژول

 

ماژول ADM-dateTimePicker توسط  مهرشاد تیموری برای AngularJS ساخته شده است. همانطور که می دانیم Angular یکی از بهترین ابزارهای موجود برای ساخت برنامه‌های تک صفحه ای (Single Page Applications SPA)  است که توسط گوگل توسعه داده می شود.

 

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

 

این ماژول از نظر UI بسیار شیک است و از فریم ورک محبوب Bootstrap برای ظاهر ماژول استفاده شده است که قابلیت ریسپانسیو بودن را نیز دارا است.

 

اگر شما نیز یک توسعه دهنده هستید و می خواهید این سیستم را توسعه دهید تا افراد دیگر بتوانند به راحتی از این امکان عالی استفاده کنند به گیت‌هاب این ماژول مراجعه کنید. 🙂


 

 

نصب و راه اندازی ماژول

 

نصب این ماژول بسیار آسان است. بهترین و آسان ترین روش برای نصب موارد لازم استفاده از Node.js است. مطمئن شوید که برنامه Node.js را در سیستم خود نصب کرده باشید. برای نصب Node پیشنهاد می شود نصب Node.js و NPM در Linux را مطالعه کنید.

 

ابتدا یک دایرکتوری با نام دلخواه برای پروژه خود درست کنید و از طریق خط فرمان به داخل آن سوئیچ کنید. پس از نصب Node به ترمینال یا خط فرمان خود مراجعه کنید و  دستور آشنا زیر را اجرا کنید تا ماژول adm-dtp در دایرکتوری node_modules دانلود و ذخیره شود.

 

 

پس از نصب ماژول، فایلی دلخواه (index.html) در ریشه دایرکتوری پروژه خود ایجاد کنید و HTML های ساده زیر را به آن اضافه کنید:

 

 

همانطور که مشاهده می کنید منابع لازم را به فایل index.html لینک کرده ایم. اما از آنجایی که ماژول نیازمند Angular و Bootstrap باید این‌ها را نیز از طریق خط با npm دانلود و نصب کنیم:

 

 

برای راحتی در کار می توانیم از کلاس های آماده Bootstrap استفاده کنیم. پس HTML های زیر را همراه با دایرکتویوهای آنگولار به فایل index.html درون تگ body اضافه کنید:

 

 

توجه داشته باشید که ng-app را به تگ html خود اضافه کرده باشید! فایل index.html را در مرورگر اجرا کنید تا خروجی را بصورت زیر مشاهده کنید:

 

datetimepicker تقویم جلالی و میلادی

 

این فقط یک نصب و راه اندازی ساده بود. برای مشاهده تنظیمات این ماژول به مستندات adm-dtp مراجعه کنید تا لیستی از تنظیمات باحال را در آنجا پیدا کنید. برای آشنایی بیشتر در رابطه با Angular.js به دسته Angular در این سایت مراجعه کنید.


 

 

  • kianajoo

    عالی بود…مرسی…
    لطفا از angularjs و node.js بیشتر مطلب بنویسین…
    و ادامه ترجمه کتاب node.js رو…
    بازم ممنون…

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

    راستی تو فرم ارسال نظر ادرس وب سایت بدون www. امکان پذیر نیست. حتی http:///

  • محمدرضا

    واقعا جای همچنین ماژولی تو وب فارسی خالی بود.

  • سلام
    تشکر، ماژول بسیار عالی و کاربردیه.
    واقعاً دست مهندس تیموری بابت نوشتن این ماژول درد نکنه.

  • نوید

    چجوری میتونم timestamp تاریخ انخاب شده رو توی مدلم بذام

    • نوید

      پیدا کردم ….. از full date استفاده میکنیم

  • mohammad

    چرا توی internet explorer این پلاگین باعث میشه مرورگر هنگ کنه؟…اگه کسی میدونه ممنون میشم راه حلشو بگید