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

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

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

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

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

4.  تنظیمات  datepicker

5. اتصال jQuery  در پروژه

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

7. ما به فایلهای زیر نیاز داریم

Jquery-ui.css

Jquery.js

Jquery-ui.js

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

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

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

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

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

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

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

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

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

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

    <link href="styles/jquery-ui.css" rel="stylesheet" />  
    <script src="scripts/jquery-1.11.3.min.js"></script>  
    <script src="scripts/jquery-ui.js"></script>  

11. کدهای زیر را در head صفحه وارد میکنیم

    <script>  
    $(function ()  
    {  
        $('#txtDatePicker').datepicker(  
        {  
            dateFormat: 'dd/mm/yy',  
            changeMonth: true,  
            changeYear: true,  
            yearRange: '1950:2100'  
        });  
    })  
    </script>  

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