Results 1 to 10 of 10

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

  1. #1
    Join Date
    Oct 2007
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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

  2. #2
    Join Date
    Jan 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,030
    Thanks
    44
    Thanked 3,211 Times in 3,173 Posts
    Blog Entries
    12

    Default

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

    http://www.dynamicdrive.com/dynamici...oncalendar.htm
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    Jun 2013
    Posts
    4
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    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?

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,030
    Thanks
    44
    Thanked 3,211 Times in 3,173 Posts
    Blog Entries
    12

    Default

    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>
    Last edited by jscheuer1; 06-06-2013 at 03:16 PM. Reason: add robust
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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

    kbptz (06-06-2013)

  7. #6
    Join Date
    Jun 2013
    Posts
    4
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    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!

  8. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,030
    Thanks
    44
    Thanked 3,211 Times in 3,173 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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

    kbptz (06-06-2013)

  10. #8
    Join Date
    Jun 2013
    Posts
    4
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    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>

  11. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,030
    Thanks
    44
    Thanked 3,211 Times in 3,173 Posts
    Blog Entries
    12

    Default

    OK, and I just noticed an error in the calendarDateInput.js script. Find this:

    Code:
    onKeyPress="return YearDigitsOnly(window.event)"
    Change it to:

    Code:
    onKeyPress="return YearDigitsOnly(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.

    Anyways, back to your question. For the 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>
    <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>
    The simplified would be similar:

    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');
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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

    kbptz (06-07-2013)

  13. #10
    Join Date
    Jun 2013
    Posts
    4
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    Thanks, you do amazing work! I want to take a JavaScript class now :-)

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •