ultra easy calender picker
By: Nick Chan
<cfscript>
    iCalender = 0;
    function DrawCalender(aName) {
        if(iCalender IS 0){
            sRes="<script type=""text/javascript"">";
            sRes=sRes & "function _cl_DaysInMonth(iYear){return new Array(',31, ((iYear % 4 == 0 && iYear % 100 != 0) || iYear % 400 == 0 ? 29 : 28), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);}" & chr(13);
            sRes=sRes & "var _cl_month_name = new Array (','January','February','March','April','May','June','July','August','September','October','November','December');" & chr(13);
            sRes=sRes & "var _cl_thedate = new Date( );var _cl_theyear = _cl_thedate.getFullYear( );var _cl_themonth = _cl_month_name[_cl_thedate.getMonth( ) +1];var_cl_theday = _cl_thedate.getDate( );" & chr(13);
            sRes=sRes & "function CreateCalender(o){";
            sRes=sRes & "var _cl_selD = document.createElement('select');" & chr(13);
            sRes=sRes & "var _cl_in=o.getElementsByTagName('input')[0].value.split(');if(_cl_in.length>1)_cl_CDays(_cl_selD,_cl_in[1],_cl_in[2],_cl_in[0]);else_cl_CDays(_cl_selD,_cl_themonth,_cl_theyear,_cl_theday);" & chr(13);
            sRes=sRes & "o.appendChild(_cl_selD);" & chr(13);
            sRes=sRes & "_cl_selD = document.createElement('select');" & chr(13);
            sRes=sRes & "_cl_selD.onchange = function(){_cl_UpdateDays(this)};" & chr(13);
            sRes=sRes & "if(_cl_in.length>1)_cl_CMonth(_cl_selD,_cl_in[2],_cl_in[1]);else _cl_CMonth(_cl_selD,_cl_theyear,_cl_themonth);" & chr(13);
            sRes=sRes & "o.appendChild(_cl_selD);_cl_selD = document.createElement('select');" & chr(13);
            sRes=sRes & "_cl_selD.onchange = function(){_cl_UpdateMonth(this)};" & chr(13);
            sRes=sRes & "if(_cl_in.length>1)_cl_CYear(_cl_selD,_cl_in[2]);else _cl_CYear(_cl_selD,_cl_theyear);" & chr(13);
            sRes=sRes & "o.appendChild(_cl_selD);" & chr(13);
            sRes=sRes & "if(_cl_in.length>1)SetDate(_cl_selD);" & chr(13);
            sRes=sRes & "_cl_selD = document.createElement('input');_cl_selD.type = 'button';_cl_selD.value = 'OK';_cl_selD.onclick=function(){_clHide(this);SetDate(this);};o.appendChild(_cl_selD);" & chr(13);
            sRes=sRes & "_cl_selD = document.createElement('em');_cl_selD.innerHTML = '&nbsp;';o.appendChild(_cl_selD);" & chr(13);
            sRes=sRes & "_cl_selD = document.createElement('input');_cl_selD.type = 'button';_cl_selD.value = 'Clear';_cl_selD.onclick=function(){this.parentNode.getElementsByTagName('input')[0].value=';_clHide(this);};o.appendChild(_cl_selD);" & chr(13);
            sRes=sRes & "_cl_selD = document.createElement('em');_cl_selD.innerHTML = '&nbsp;';o.appendChild(_cl_selD);" & chr(13);
            sRes=sRes & "_cl_selD = document.createElement('input');_cl_selD.type = 'button';_cl_selD.value = 'Cancel';_cl_selD.onclick=function(){_clHide(this)};o.appendChild(_cl_selD);_clHide(o.firstChild);" & chr(13);
            sRes=sRes & "}" & chr(13);
            sRes=sRes & "function _clHide(o){";
            sRes=sRes & "o=o.parentNode.getElementsByTagName('input')[0];" & chr(13);
            sRes=sRes & "if(o.style.display=='none'){var _clTemp='none';o.style.display='inline';}else{var _clTemp='inline';o.style.display='none'}" & chr(13);
            sRes=sRes & "var _cls = o.parentNode.getElementsByTagName('select');" & chr(13);
            sRes=sRes & "for(var _cl_i=0;_cl_i<_cls.length;_cl_i++){_cls[_cl_i].style.display=_clTemp;}" & chr(13);
            sRes=sRes & "_cls = o.parentNode.getElementsByTagName('input');" & chr(13);
            sRes=sRes & "for(var _cl_i=1;_cl_i<_cls.length;_cl_i++)_cls[_cl_i].style.display=_clTemp;" & chr(13);
            sRes=sRes & "}" & chr(13);
            sRes=sRes & "function GetIndex(arr,aValue){for(var _cl_i=0;_cl_i<arr.length;_cl_i++)if(arr[_cl_i]==aValue)return _cl_i;}" & chr(13);
            sRes=sRes & "function _cl_CDays(o,iMonth,iYear,selectedDay){" & chr(13);
            sRes=sRes & "if(o.length)o.length = 0;var _cl_days = _cl_DaysInMonth(iYear);for(var _cl_i=1;_cl_i<=_cl_days[GetIndex(_cl_month_name,iMonth)];_cl_i++){var _clOptNew = document.createElement('option');_clOptNew.text = _cl_i;_clOptNew.value = _cl_i;if(document.all)o.add(_clOptNew);else o.add(_clOptNew,null);if(_cl_i==selectedDay){o.options[_cl_i-1].selected=true;o.selectedIndex=_cl_i-1}}}" & chr(13);
            sRes=sRes & "function _cl_CMonth(o,iYear,selectedMonth){" & chr(13);
            sRes=sRes & "if(o.length)o.length = 0;for(var _cl_i=1;_cl_i<=12;_cl_i++){var _clOptNew = document.createElement('option');_clOptNew.text = _cl_month_name[_cl_i];_clOptNew.value = _cl_month_name[_cl_i];if(document.all)o.add(_clOptNew);else o.add(_clOptNew,null);if(_cl_month_name[_cl_i]==selectedMonth){o.options[_cl_i-1].selected=true;o.selectedIndex=_cl_i-1}}}" & chr(13);
            sRes=sRes & "function _cl_CYear(o,selectedYear){if(o.length)o.length = 0;for(var _cl_i=_cl_theyear-15;_cl_i<=_cl_theyear+15;_cl_i++){var _clOptNew = document.createElement('option');_clOptNew.text = _cl_i;_clOptNew.value = _cl_i;if(document.all)o.add(_clOptNew);else o.add(_clOptNew,null);if(_cl_i==selectedYear){o.options[_cl_i-_cl_theyear+15].selected=true;o.selectedIndex=_cl_i-_cl_theyear+15}}}" & chr(13);
            sRes=sRes & "function _cl_UpdateDays(o){var _cl_a = o.parentNode.getElementsByTagName('select');var _cl_selD = document.createElement('select');_cl_CDays(_cl_selD,o.options[o.selectedIndex].value,_cl_a[2].options[_cl_a[2].selectedIndex].value,_cl_a[0].options[_cl_a[0].selectedIndex].value);o.parentNode.replaceChild(_cl_selD,_cl_a[0]);}" & chr(13);
            sRes=sRes & "function _cl_UpdateMonth(o){var _cl_a = o.parentNode.getElementsByTagName('select');var _cl_selD = document.createElement('select');_cl_CDays(_cl_selD,_cl_a[1].options[_cl_a[1].selectedIndex].value,o.options[o.selectedIndex].value,_cl_a[0].options[_cl_a[0].selectedIndex].value);o.parentNode.replaceChild(_cl_selD,_cl_a[0]);}" & chr(13);
            sRes=sRes & "function SetDate(o){var _cl_a = o.parentNode.getElementsByTagName('select');o.parentNode.getElementsByTagName('input')[0].value = _cl_a[0].options[_cl_a[0].selectedIndex].value +' '+ _cl_a[1].options[_cl_a[1].selectedIndex].text +' '+_cl_a[2].options[_cl_a[2].selectedIndex].value}</script>" & chr(13);
            writeOutput(sRes);
            iCalender = 1;
        }
        if(ArrayLen(arguments) GT 1 AND NOT structKeyExists(form,aName))
            writeOutput('<span><input readonly="readonly" style="display:none" onclick="_clHide(this)" onkeydown="return false" type="text" name="' & aName & '" id="' & aName & '" value="' & Day(arguments[2]) & ' ' &             MonthAsString(Month(arguments[2])) & ' ' & year(arguments[2]) & '"></span><script type="text/javascript">CreateCalender(document.getElementById("' & aName & '").parentNode)</script>');
        else
            writeOutput('<span><input readonly="readonly" style="display:none" onclick="_clHide(this)" onkeydown="return false" type="text" name="' & aName & '" id="' & aName & '" value="' & htmlEditFormat(FormVal(aName)) & '"></span><script type="text/javascript">CreateCalender(document.getElementById("' & aName & '").parentNode)</script>');
    }

    function FormVal(aKey){
        if(structKeyExists(form, aKey))
            return Trim(form[aKey]);
        
        else
            return "";
        }

</cfscript>

<cfscript>DrawCalender("txtDOB");</cfscript>
<cfscript>DrawCalender("txtDOB",Now());</cfscript>

About This Tutorial
Author: Nick Chan
Skill Level: Beginner 
 
 
 
Platforms Tested: CF5
Total Views: 25,244
Submission Date: June 06, 2005
Last Update Date: June 05, 2009
All Tutorials By This Autor: 1
Discuss This Tutorial

  • Agree with Daryl, no documentation so please remove.... not helpful!

  • Please remove this from the tutorial or in the least provide some documentaton on how to implement it. As it is, it isn't teaching me much. Thanks.

  • i tried it many times and it worked. also setup for leapyear. how did u use it i only tried it on version 5

  • does this even work? I set it up with my own date in the mydate field and get error nvalid CFML construct found on line 312 at column 59. ColdFusion was looking at the following text:

    ;

    The CFML compiler was processing:

    • an expression beginning with "DrawCalender", on line 312, column 11.This message is usually caused by a problem in the expressions structure.
    • a script statement beginning with "DrawCalender" on line 312, column 11.
    • a cfscript tag beginning on line 312, column 2.
    • a cfscript tag beginning on line 312, column 2.
    • a cfscript tag beginning on line 312, column 2.
    Also is this set up for leapyear?

  • myDate is your own date type variable it takes 2 parameters DrawCalender(a,b) a is the name of the form field for example txtDOB after u submit, the get the selected date by form.txtDOB b - is optional parameter, meaning the Initial Date that u want to display. u can pass any date of type "date"

  • What about the variable myDate? Variable MYDATE is undefined.

  • sorry it should be like this DrawCalender("txtDOB"); DrawCalender("txtDOB2",Now()); DrawCalender("txtDOB3",myDate);

Advertisement

About
Resources
Social
Sponsored By...
Powered By...

© 2002-2012 EasyCFM, LLC. All rights reserved.
You are 1 of 922 active visitors.