Use JQuery Datepicker In ASP.NET Web Form

Here are the steps,

1. Create a new Web site project.

Click File, New Web Site, then select ASP.NET Empty Web Site.

2. Right click on project.

Click Add, then Add New Item and Web Form, then name it Default.aspx.

3. JQuery Datepicker is a part of JQueryUI and first we have to download JQueryUI from the JQueryUI site. Here's the link.

• JQueryUI
• JQueryUI Demo

You can see the following widgets are available under JQueryUI. We are going to use Datepicker.

Click on Datepicker or you can directly type the following address.

The JQueryUI website shows all HTML implementations, code, and demos. We just have to mold them as per our requirements and options depending on the scenario.

4. I would suggest you play around on this page with different flavors of Datepicker settings.

5. For attaching JQuery in our project or page follow this.

6. We are going to download code from JQueryUI and attach with our project.

7. We need three files.

• Jquery-ui.css
• Jquery.js
• Jquery-ui.js

The above listed three files can be taken from CDN or locally from the project. Before taking from the project first we have to download and give the reference.

As JQuery UI site displays the 1.11.4 stable version, we have used the same.

Download JQuery from jquery.com.

8. Download jquery-ui-1.11.4custom.zip file and extract.

9. After extracting it on your location, now add the above mentioned three files into your project.

I havw created two folders.

1. Styles: In style folder we will keep all the CSS files.
2. Scripts: In scripts folder we will keep all the JS files.

Right click on Project (Solution Explorer) - Add Existing Item, then select the following files from your extracted folder.

• Jquery-ui.css: Add this file inside Styles folder.
• Jquery-1.11.3.min.js: Add this file inside Scripts folder.
• Jquery-ui.js: Add this file inside Scripts folder.

10. Give reference in default.aspx file.

<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. Main logic of Datepicker.

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

12. We have created a textbox whose ID= txtDatePicker. In the above code we attached ID with Jquery-UI and Jquery.

You can see Datepicker attached with textbox.