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:rolleyes:
Many thanks in advance.
Dorgs
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
On the demo page for this script, it shows the current date:
http://www.dynamicdrive.com/dynamici...oncalendar.htm
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?
Honestly, that was so long ago, I haven't a clue what I meant.
Try this:
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;
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>
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>
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!
You're welcome. Both of those methods rely upon the form having an id of 'mydateform'. These counterparts do not:
Simple version:
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(){
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>
Also I should have mentioned that the name of the hidden field (red):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>
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.Code:<script>DateInput('orderdate', true, 'DD-MON-YYYY')</script>
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.
These solutions all worked great! I am thrilled that this was solved. I loved the robust solutions, even though I ended up using the streamlined (first option). I used the streamlined option to save space, because I have multiple DateInput fields to clear out.
I needed to apply the code to the different DateInput field names, but I couldn't figure out how to do that. For example, if I had field names of "orderdate", "orderdate2" and "orderdate3" which I wanted to clear out. I couldn't find another way to apply it to all of them, other than to copy and paste the whole script chunk multiple times under the form closing tag, like this:Code:<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>
<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('orderdate2');
</script>
<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('orderdate3');
</script>
OK, and I just noticed an error in the calendarDateInput.js script. Find this:
Change it to:Code:onKeyPress="return YearDigitsOnly(window.event)"
The original only works in IE. With the change it works in all browsers. What it does is prohibit anything other than a number being entered in the Year field. At least via the keyboard. I think you could still paste something else in there.Code:onKeyPress="return YearDigitsOnly(event)"
Anyways, back to your question. For the robust version:
The simplified would be similar: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>
<form>
<script>DateInput('orderdate2', true, 'DD-MON-YYYY')</script>
<input type="button" onclick="alert(this.form.orderdate2.value)" value="Show date value passed">
</form>
<script type="text/javascript">
function emptyfields (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]);
};
};
}
emptyfields('orderdate');
emptyfields('orderdate2');
</script>
</body>
</html>
Code:function emptyfields(dateName){
var elementsdate = document.getElementsByName(dateName)[0].form.elements, i = elementsdate.length, el;
while(--i > -1){
el = elementsdate[i];
if(el.id.indexOf(dateName + '_') === 0 || el.name === dateName){
el.value = '';
el.selectedIndex = -1;
}
}
}
emptyfields('orderdate');
emptyfields('orderdate2');