Jason's Date Input Calendar - Need Help to Display Empty Date Fields?

**Dorgs** · 10-25-2007, 09:51 AM

Jason's Date Input Calendar

Hi All, hope someone can help with this.
I have the script working fine, but would like the Calendar Fields to Display (--/--/----) from the start, rather than just displaying an empty field before you select the month.

I hope this makes sense

Many thanks in advance.

Dorgs

**KiMbEr** · 01-12-2010, 11:35 AM

Hi,

Any luck with this? I'm trying to do the same thing. But this is all new to me and very complex.

Thanks,
KiMbEr

**jscheuer1** · 01-13-2010, 08:47 AM

On the demo page for this script, it shows the current date:

http://www.dynamicdrive.com/dynamici...oncalendar.htm

**kbptz** · Yesterday, 10:15 PM

I'm sorry jscheuer1 I don't understand your answer. Do you mean that there is no other option than to show the current date?
(I'm very new to this and I have the calendar installed and working on a website. However, I do not know much about JavaScript.) Can you please explain what part of the script can I edit, so that the calendar's date fields can be blank until a user actually selects a date?

**jscheuer1** · Today, 05:21 AM

Honestly, that was so long ago, I haven't a clue what I meant.

Try this:

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="calendarDateInput.js">

/***********************************************
* Jason's Date Input Calendar- By Jason Moon http://calendar.moonscript.com/dateinput.cfm
* Script featured on and available at http://www.dynamicdrive.com
* Keep this notice intact for use.
***********************************************/

</script>
</head>
<body>
<form id="mydateform">

 <script>DateInput('orderdate', true, 'DD-MON-YYYY')</script>

 <input type="button" onclick="alert(this.form.orderdate.value)" value="Show date value passed">

 </form>
<script type="text/javascript">
(function(){
	var elementsdate = document.getElementById('mydateform').elements, i = elementsdate.length, el;
	while(--i > -1){
		el = elementsdate[i];
		if(el.id.indexOf(this + '_') === 0 || el.name == this){
			el.value = '';
			el.selectedIndex = -1;
		}
	}
}).apply('orderdate');
</script>
</body>
</html>

Or try this more robust version:

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="calendarDateInput.js">

/***********************************************
* Jason's Date Input Calendar- By Jason Moon http://calendar.moonscript.com/dateinput.cfm
* Script featured on and available at http://www.dynamicdrive.com
* Keep this notice intact for use.
***********************************************/

</script>
</head>
<body>
<form id="mydateform">

 <script>DateInput('orderdate', true, 'DD-MON-YYYY')</script>

 <input type="button" onclick="alert(this.form.orderdate.value)" value="Show date value passed">

 </form>
<script type="text/javascript">
(function(){
	var elementsdate = document.getElementById('mydateform').elements, i = elementsdate.length, el, day, month, year, dn = this, pd;
	elementsdate[this].value = '';
	while(--i > -1){
		el = elementsdate[i];
		if(el.className === 'calendarDateInput' && el.id.indexOf(this + '_') === 0){
			if(el.id === this + '_Year_ID'){
				el.value = '';
				el.disabled = true;
				year = el;
			}
			if(el.id === this + '_Day_ID'){
				el.selectedIndex = -1;
				el.disabled = true;
				day = el;
			}
			if(el.id === this + '_Month_ID'){
				el.selectedIndex = -1;
				month = el;
				(function(el){
					el.onchange = function(){
						day.disabled = year.disabled = false;
						day.selectedIndex = 0;
						year.value = new Date().getFullYear();
						window[dn + '_Object'].pickDay = function(dayNum){
							pd.apply(window[dn + '_Object'], [dayNum]);
						};
						window[dn + '_Object'].changeMonth(el);
						el.onchange = function(){window[dn + '_Object'].changeMonth(el);};
					};
				})(el);
			}
		}
	}
	pd = window[dn + '_Object'].pickDay;
	window[dn + '_Object'].pickDay = function(dayNum){
		day.disabled = year.disabled = false;
		day.selectedIndex = 0;
		year.value = new Date().getFullYear();
		month.onchange = function(){window[dn + '_Object'].changeMonth(month);};
		pd.apply(window[dn + '_Object'], [dayNum]);
		window[dn + '_Object'].pickDay = function(dayNum){
			pd.apply(window[dn + '_Object'], [dayNum]);
		};
	};
}).apply('orderdate');
</script>
</body>
</html>

**kbptz** · Today, 03:20 PM

Thank you so much for your help! I'm going to try these solutions. You are wonderful for responding to such an antiquated post. :-) We found this calendar input field code especially useful because it works in Safari, Firefox, Chrome, Internet Explorer 9, 8 and 7 (all of which we must support). Very grateful for the smart people who have developed this code!

**jscheuer1** · Today, 05:29 PM

You're welcome. Both of those methods rely upon the form having an id of 'mydateform'. These counterparts do not:

Simple version:

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="calendarDateInput.js">

/***********************************************
* Jason's Date Input Calendar- By Jason Moon http://calendar.moonscript.com/dateinput.cfm
* Script featured on and available at http://www.dynamicdrive.com
* Keep this notice intact for use.
***********************************************/

</script>
</head>
<body>
<form>

 <script>DateInput('orderdate', true, 'DD-MON-YYYY')</script>

 <input type="button" onclick="alert(this.form.orderdate.value)" value="Show date value passed">

 </form>
<script type="text/javascript">
(function(){
	var elementsdate = document.getElementsByName(this)[0].form.elements, i = elementsdate.length, el;
	while(--i > -1){
		el = elementsdate[i];
		if(el.id.indexOf(this + '_') === 0 || el.name == this){
			el.value = '';
			el.selectedIndex = -1;
		}
	}
}).apply('orderdate');
</script>
</body>
</html>

Robust version:

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="calendarDateInput.js">

/***********************************************
* Jason's Date Input Calendar- By Jason Moon http://calendar.moonscript.com/dateinput.cfm
* Script featured on and available at http://www.dynamicdrive.com
* Keep this notice intact for use.
***********************************************/

</script>
</head>
<body>
<form>

 <script>DateInput('orderdate', true, 'DD-MON-YYYY')</script>

 <input type="button" onclick="alert(this.form.orderdate.value)" value="Show date value passed">

 </form>
<script type="text/javascript">
(function(dateName){
	var elementsdate = document.getElementsByName(dateName)[0].form.elements, i = elementsdate.length,
	dateObj = window[dateName + '_Object'], el, day, month, year, pd;
	dateObj.setHidden('');
	while(--i > -1){
		el = elementsdate[i];
		if(el.className === 'calendarDateInput' && el.id.indexOf(dateName + '_') === 0){
			if(el.id === dateObj.yearFieldID){
				el.value = '';
				el.disabled = true;
				year = el;
				el.title = 'Enter Year - First Pick a Month';
			}
			else if(el.id === dateObj.dayListID){
				el.selectedIndex = -1;
				el.disabled = true;
				day = el;
				el.title = 'Select Day - First Pick a Month';
			}
			else if(el.id === dateObj.monthListID){
				el.selectedIndex = -1;
				el.title = 'Month';
				month = el;
				(function(el){
					el.onchange = function(){
						day.disabled = year.disabled = false;
						day.selectedIndex = 0;
						day.title = 'Day';
						year.value = new Date().getFullYear();
						year.title = 'Year';
						dateObj.pickDay = function(dayNum){
							pd.apply(dateObj, [dayNum]);
						};
						dateObj.changeMonth(el);
						el.onchange = function(){dateObj.changeMonth(el);};
					};
				})(el);
			}
		}
	}
	pd = dateObj.pickDay;
	dateObj.pickDay = function(dayNum){
		day.disabled = year.disabled = false;
		day.selectedIndex = 0;
		day.title = 'Day';
		year.value = new Date().getFullYear();
		year.title = 'Year';
		month.onchange = function(){dateObj.changeMonth(month);};
		pd.apply(dateObj, [dayNum]);
		dateObj.pickDay = function(dayNum){
			pd.apply(dateObj, [dayNum]);
		};
	};
})('orderdate');
</script>
</body>
</html>

Also I should have mentioned that the name of the hidden field (red):

Code:

 <script>DateInput('orderdate', true, 'DD-MON-YYYY')</script>

must ne passed to the function as shown in all of the examples, where it is highlighted red in each example. It can be whatever you want it to be. But it must be unique and it must be passed as mentioned.

Any questions, just let me know.

If you're having trouble implementing any of these and want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

Thread: Jason's Date Input Calendar - Need Help to Display Empty Date Fields?

Thread Tools

Search Thread

Jason's Date Input Calendar - Need Help to Display Empty Date Fields?

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions