Click here to Skip to main content
Click here to Skip to main content

ASP.NET date picker control - Part 2

, 24 Aug 2009
Rate this:
Please Sign up or sign in to vote.
In this post, I will explain you how I have embedded JavaScript, images and stylesheet to my previous article.

image

Introduction

In my previous post How to: Create a Date Picker Composite Control in ASP.NET (C#), I explained how to work with ASP.NET composite control to create a date picker control for ASP.NET.

Problem

However to use that control you still require JavaScript, style and images to be included.

Solution

In this post, I will explain you how I have embedded JavaScript, images and stylesheet to my previous article, How to: Create a Date Picker Composite Control in ASP.NET (C#). I have also added another property to the control which is how to change date format for the control. You can download the code, drag and drop it and start using it inside data navigation controls or anywhere in your ASP.NET web application.

Property

  • DateFormat - By default, it's been set to "%d/%m/%Y" which is DMY.

How to Embed ?

I added to the project images, JavaScripts, and styles that I need for my date picker control. Click on each file properties and change Build Action from Content to Embedded Resource, then modify the AssemblyInfo.cs as below:

[assembly: System.Web.UI.WebResource("DatePicker.Resources.calendarview.css", "text/css")]
[assembly: System.Web.UI.WebResource("DatePicker.Resources.calendarview.js", "text/js")]
[assembly: System.Web.UI.WebResource("DatePicker.Resources.CalendarIcon.gif", "img/gif")]
[assembly: System.Web.UI.WebResource("DatePicker.Resources.prototype.js", "text/js")]

Note: The format of embedded resources is very important which is:

[Assembly Name].[Folder].[File Name]

To Embed JavaScript

To embed JavaScript, I have created a function called AddJavaScript(string javaScriptFile) which is:

private void AddJavaScript(string javaScriptFile)
    {
        string scriptLocation = Page.ClientScript.GetWebResourceUrl
		(this.GetType(),javaScriptFile );
        Page.ClientScript.RegisterClientScriptInclude(javaScriptFile, scriptLocation);

    }

To Embed Stylesheet

private void AddStyleSheet()
     {
         string includeTemplate = "<link rel='stylesheet' text='text/css' href='{0}' />";
         string includeLocation =
               Page.ClientScript.GetWebResourceUrl
		(this.GetType(), "DatePicker.Resources.calendarview.css");
         LiteralControl include = new LiteralControl
				(String.Format(includeTemplate, includeLocation));
         Page.Header.Controls.Add(include);
     }

To Embed Image

Just add the following line inside the OnInit function:

_ImgDate.ImageUrl = Page.ClientScript.GetWebResourceUrl(this.GetType(), 
			"DatePicker.Resources.CalendarIcon.gif");

Add these functions inside the OnInit function:

AddStyleSheet();
AddJavaScript("DatePicker.Resources.prototype.js");
AddJavaScript("DatePicker.Resources.calendarview.js");

And that is our date picker control ready to use. You can drag and drop on any page and start using it.

View this article on my blog.

Your feedback is welcome.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Salmanzz
Software Developer (Senior) BMJ
United Kingdom United Kingdom
No Biography provided

Comments and Discussions

 
GeneralError: Microsoft JScript runtime error: Object doesn't support this property or method PinmemberDaniel Kamisnki4-Dec-09 15:50 
Generalnice on.. PinmemberRajesh Pillai24-Aug-09 13:27 
GeneralRe: nice on.. PinmemberSalmanzz25-Aug-09 0:47 
GeneralAnother issue I'd like to solve PinmemberPhyllis Smith15-Aug-09 16:18 
GeneralRe: Another issue I'd like to solve PinmemberSalmanzz16-Aug-09 8:21 
GeneralProblem with adding validators PinmemberPhyllis Smith14-Aug-09 15:55 
GeneralRe: Problem with adding validators PinmemberSalmanzz15-Aug-09 0:32 
GeneralRe: Problem with adding validators PinmemberPhyllis Smith15-Aug-09 2:19 
QuestionVery good - but the calender is placed abowe the page? Pinmemberpalsbo21-Jul-09 23:46 
AnswerRe: Very good - but the calender is placed abowe the page? PinmemberSalmanzz21-Jul-09 23:59 
GeneralThanks great control Pinmemberwtf_imanut21-Jul-09 8:35 
GeneralRe: Thanks great control PinmemberSalmanzz21-Jul-09 23:28 
GeneralRe: Thanks great control Pinmemberwtf_imanut27-Jul-09 8:34 
GeneralRe: Thanks great control PinmemberSalmanzz27-Jul-09 23:42 
GeneralGood Work! Pinmemberprasad022-Jul-09 3:19 
GeneralRe: Good Work! PinmemberSalmanzz2-Jul-09 4:56 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web02 | 2.8.140709.1 | Last Updated 24 Aug 2009
Article Copyright 2009 by Salmanzz
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid