Calender pop-up Control in asp.net

Question

0.00/5 (No votes)

See more:

Hi,

I have used calender pop-up control using html.

It is working fine when I added one textbox.

If I add multiple texbox, calender is pup-up only for one text box.

Below is my code

C#

<head>

<link rel="stylesheet" type="text/css" media="all" href="jsDatePick_ltr.min.css" />

<script type="text/javascript" src="jsDatePick.min.1.3.js"></script>

<script type="text/javascript">
	window.onload = function(){
		new JsDatePick({
			useMode:2,
			target:"inputField",
			dateFormat:"%d-%M-%Y"
		});
	};
</script>
</head>
<body>

    
    Look at the comments on the HTML source to fully understand how this very simple example works.
    
    <input type="text" size="12" id="inputField" />
    
</body>
</html>

Please help

Posted 15-Oct-13 2:31am

srmohanr

Add a Solution

3 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

thatraja · Answer 1 · 2013-10-15T02:45:00

No full code, but based on available code & your question, I could give you answer.

I think you forgot to change the target for second script(JsDatePick), it'll happen if you copy & paste code & forgot to do changes

ASP

<input type="text" size="12" id="inputField" />
<input type="text" size="12" id="<b>inputField2</b>" /><!--Here second element id is inputField2-->

XML

<script type="text/javascript">
    window.onload = function(){
        new JsDatePick({
            useMode:2,
            target:"inputField",
            dateFormat:"%d-%M-%Y"
        });
        new JsDatePick({
            useMode:2,
            target:"inputField2",/*Here you have to change the element id*/
            dateFormat:"%d-%M-%Y"
        });
    };
</script>

EDIT
------------------------
jsDatePick guys could help you quickly. Anyway here my sample idea(not sure it'll click), modify yourself.
Create a js function for dropdownlist onchange. Try it.

ASP

<asp:DropDownList ID="ddlTest" runat="server"  AutoPostBack="true"
onchange="return EnableDisableDatePickers();" OnSelectedIndexChanged="some_event" >
</asp:DropDownList>

function EnableDisableDatePickers() {
/*Sample code*/
        new JsDatePick({
            useMode:2,
            target:"inputField",
            dateFormat:"%d-%M-%Y"
        });
}

Prasad Khandekar · Answer 2 · 2013-10-15T02:46:00

Hello,

From the documentation it appears that to bind to multiple text boxes you will have to create multiple instances of JsDatePick. So if you have 4 text boxes named sat txt1, txt2, txt3 and txt4, then your code to attach the calendar to these text boxes will be something similar to one shown below.

JavaScript

window.onload = function(){
    new JsDatePick({
	useMode:2,
	target:"txt1",
	dateFormat:"%d-%M-%Y"
    });
    new JsDatePick({
	useMode:2,
	target:"txt3",
	dateFormat:"%d-%M-%Y"
    });
    new JsDatePick({
	useMode:2,
	target:"txt3",
	dateFormat:"%d-%M-%Y"
    });
    new JsDatePick({
	useMode:2,
	target:"txt4",
	dateFormat:"%d-%M-%Y"
    });
};

Here is a sample page taken directly from the jsDatePick library.

HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jsDatePick Javascript example</title>
<!--

	Copyright 2009 Itamar Arjuan
	jsDatePick is distributed under the terms of the GNU General Public License.

	****************************************************************************************

	Copy paste these 2 lines of code to every page you want the calendar to be available at
-->
<link rel="stylesheet" type="text/css" media="all" href="jsDatePick_ltr.min.css" />
<!--
	OR if you want to use the calendar in a right-to-left website
	just use the other CSS file instead and don't forget to switch g_jsDatePickDirectionality variable to "rtl"!

	<link rel="stylesheet" type="text/css" media="all" href="jsDatePick_ltr.css" />
-->
<script type="text/javascript" src="jsDatePick.min.1.3.js"></script>
<!--
	After you copied those 2 lines of code , make sure you take also the files into the same folder :-)
    Next step will be to set the appropriate statement to "start-up" the calendar on the needed HTML element.

    The first example of Javascript snippet is for the most basic use , as a popup calendar
    for a text field input.
-->
<script type="text/javascript">
window.onload = function(){
	new JsDatePick({
		useMode:2,
		target:"inputField",
		dateFormat:"%d-%M-%Y"
		/*selectedDate:{				This is an example of what the full configuration offers.
			day:5,						For full documentation about these settings please see the full version of the code.
			month:9,
			year:2006
		},
		yearsRange:[1978,2020],
		limitToToday:false,
		cellColorScheme:"beige",
		dateFormat:"%m-%d-%Y",
		imgPath:"img/",
		weekStartDay:1*/
	});
	new JsDatePick({
		useMode:2,
		target:"inputField2",
		dateFormat:"%d-%M-%Y"
	});
	new JsDatePick({
		useMode:2,
		target:"inputField3",
		dateFormat:"%d-%M-%Y"
	});
};

function doChange(ctrl) {
	var val = ctrl.options[ctrl.selectedIndex].value;
	if ("NONE" === val) {
		document.getElementById('inputField').disabled = false;
		document.getElementById('inputField2').disabled = false;
		document.getElementById('inputField3').disabled = false;
	} else if ("FIRST" === val) {
		document.getElementById('inputField').disabled = true;
		document.getElementById('inputField2').disabled = false;
		document.getElementById('inputField3').disabled = false;
	}  else if ("SECOND" === val) {
		document.getElementById('inputField').disabled = false;
		document.getElementById('inputField2').disabled = true;
		document.getElementById('inputField3').disabled = false;
	} else {
		document.getElementById('inputField').disabled = false;
		document.getElementById('inputField2').disabled = false;
		document.getElementById('inputField3').disabled = true;
	}
}
</script>
</head>
<body>
	<h2>JsDatePick's Javascript Calendar usage example</h2>
    Look at the comments on the HTML source to fully understand how this very simple example works.
	<select id="cboOne" onchange="doChange(this);">
		<option value="NONE">Disable None</option>
		<option value="FIRST">Disable First</option>
		<option value="SECOND">Disable Second</option>
		<option value="THIRD">Disable Third</option>
	</select>
    <input type="text" size="12" id="inputField" />
	<input type="text" size="12" id="inputField2" />
	<input type="text" size="12" id="inputField3" />

</body>
</html>

Regards,

ManojDhobale · Answer 3 · 2013-10-15T21:15:00

Calender pop-up Control in asp.net

3 solutions

Solution 1

Solution 2

Solution 3

Add your solution here

Preview 0