استفاده از JQuery UI Datepicker در Web Form

JQuery Datepicker بخشی ازJQueryUI است، در این مقاله قصد داریم چگونگی استفاده از jQuery datepicker در فرم وب ASP.NET را بیان کنیم.

۱ –  یک پروژه وب سایت جدید ایجاد میکنیم.

روی File کلیک ،New Web Site و سپس ASP.NET Empty Web Site را انتخاب میکنیم

۲ – روی پروژه راست کلیک کرده و یک صفحه وب فرم جدید بنام Default.aspx اضافه میکنیم

JQuery Datepicker .3 بخشی ازJQueryUI است و باید آن را از سایت JQueryUI دانلود کنیم

۴ –  تنظیمات datepicker

۵ –  اتصال jQuery در پروژه

۶ –  فایل را ازسایت jQuery UI دانلود و به پروژه ضمیمه میکنیم.

۷ – ما به فایلهای زیر نیاز داریم

Jquery-ui.css

Jquery.js

Jquery-ui.js

سه فایل ذکر شده در بالا را می توان از CDN یا به صورت محلی در پروژه قرار داد. قبل از شروع پروژه ابتدا ما باید آن را دانلود کنیم.

از سایت jQuery UI ،آخرین نسخه را دانلود کنید .

یا جی کوئری را از jquery.com.دانلود کنید

۸ –  فایل Jquery-ui-1.11.4custom.zip را دانلود واز حالت فشرده خارج میکنیم.

۹ –  پس از اینکه فایلها را از حالت فشرده خارج کردیم، سه فایل بالا را به پروژه خود اضافه میکنیم.

دو پوشه زیر را ایجاد میکنیم:

 CSS: در پوشه Styles ما تمام فایل های CSS را حفظ خواهد کرد.
JS: در پوشه Scripts ما تمام فایل های JS را حفظ خواهد کرد.

روی پروژه راست کلیک کرده و گزینه Add و Existing Item را انتخاب و از پنجره باز شده فایلهای زیر را انتخاب میکنیم

Jquery-ui.css را در پوشه CSSاضافه میکنیم.
Jquery-1.11.3.min.js را در پوشه Js اضافه میکنیم.
Jquery-ui.js را در پوشه Js اضافه میکنیم

۱۰ – منابع زیر را به فایل Default.aspx اضافه میکینم.

 

۱۱ –  کدهای زیر را در head صفحه وارد میکنیم

 

۱۲ –  یک TextBox با ID = txtDatePicker ایجاد میکنیم. در کد بالا ID با jQuery UI و jQuery متصل شده است.


در فایل سورس کد تمام بخش های دانلود شده است

دانلود سورس کد
پسورد : csharpoop.com
پیش نمایش آنلاین

استفاده از JQuery UI Datepicker در Web Form
5 (100%) 1 رای

(434 نوشته)

C# Programmer , Web Design And Developer , MVC , ASP.NET

2 افکار در “استفاده از JQuery UI Datepicker در Web Form

  1. حسن

    سلام دوست عزیز خسته نباشید
    بابت تمامس آموزشها واثعا دستتون درد نکنه
    ی سوال داشتم ممنون میشم راهنمایی کنین :
    دقیقا همین تقویم رو نمیشه شمسی کرد ؟ مثل تقویم های خودمون ؟
    من یادته سیستم قبلی سایت رجا دقیقا همین تقویم رو شمسی گذاشته بود برای هنگام خرید بلیط از سایت، که الان کلا سیستمشون عوض شده و هر چی نت رو گشتم اون تقویم رو نتونستم پیدا کنم
    ممنون میشم راهنمایی کنین.
    بازم دمتون گرم و خسته نباشید

    پاسخ
    1. Csharp نویسنده نوشته

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

      پاسخ

فکر شما چیست؟

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

حاصل جمع اعداد را وارد کنید : *