Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

jQuery UI Datepicker(Calendar) with Master (Content) Page Example in Asp.net

May 26, 2015
Introduction

Here I will explain
jQuery ui datepicker or calendar control with master page along with content page example or how to make jQuery ui datepicker work with master page with example in asp.net. To display calendar control in content page with master page we need to add script files in master page instead of child page in asp.net.


Now create new web application à Right click on your Application à Select Add New item à Select Master Page à Click OK like as shown below


Now open your master and write the code like as shown below

Master Page


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>jquery ui datepicker(calendar) with master page example in asp.net</title>
<asp:ContentPlaceHolder id="head" runat="server">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript">
$(function () {
$("#txtdatepicker").datepicker();
});
</script>
<style type="text/css">
.ui-datepicker { font-size:10pt !important}
</style>
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
<p>Master Page Date: <input type="text" id="txtdatepicker"></p>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>

Now open your aspx page add master page inheritance and write the code like as shown below

Content Page


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ContentPageCalendar.aspx.cs" Inherits="ContentPageCalendar" MasterPageFile="~/MasterPage.master" %>

<asp:Content ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<script type="text/javascript">
$(function () {
$("#txtchilddatepicker").datepicker();
});
</script>
<p>Child Page Date: <input type="text" id="txtchilddatepicker"></p>
</asp:Content>

Now run child page and check whether both master page and child page displaying calendar control or not ….

Demo

jQuery UI Datepicker(Calendar) with Master (Content) Page Example in Asp.net


Download Sample Code Attached

If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email

1 comments :

treeSeeker said...

Can you show how to access the selected date from the Child content page from code-behind? I want to be able to use the date in a query to SQL server...

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.