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

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

May 26, 2015

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 To display calendar control in content page with master page we need to add script files in master page instead of child page in

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="">
<head runat="server">
<title>jquery ui datepicker(calendar) with master page example in</title>
<asp:ContentPlaceHolder id="head" runat="server">
<link rel="stylesheet" href="">
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript">
$(function () {
<style type="text/css">
.ui-datepicker { font-size:10pt !important}
<form id="form1" runat="server">
<p>Master Page Date: <input type="text" id="txtdatepicker"></p>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">

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 () {
<p>Child Page Date: <input type="text" id="txtchilddatepicker"></p>

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


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

Download Sample Code Attached

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

Get the latest,, 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


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 All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.