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.
Description:
In previous articles I explained jQuery ui datepicker example, jQuery change datepicker / calendar control format, jQuery show multiple months in datepicker / calendar, jQuery slideup, slidedown, slidetoggle effects example, jQuery add border to images using css classes and many articles relating to css, AngularJS, jQuery, JavaScript and asp.net. Now I will explain how to use jQuery ui datepicker with master page in asp.net with example.
In previous articles I explained jQuery ui datepicker example, jQuery change datepicker / calendar control format, jQuery show multiple months in datepicker / calendar, jQuery slideup, slidedown, slidetoggle effects example, jQuery add border to images using css classes and many articles relating to css, AngularJS, jQuery, JavaScript and asp.net. Now I will explain how to use jQuery ui datepicker with master page in asp.net with example.
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
 |
|
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 Email
|
|||
1 comments :
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...
Note: Only a member of this blog may post a comment.