65.9K
CodeProject is changing. Read more.
Home

Easy Calendar

starIconstarIconstarIcon
emptyStarIcon
starIcon
emptyStarIcon

3.61/5 (15 votes)

Oct 20, 2004

viewsIcon

88087

downloadIcon

1796

An article that demonstrates a simple yet very powerful Calendar, no need for server-side hussle!

Introduction

Ever had a form where you wanted the user to fill-in a date, a valid date? Tried and looked for something to help you out? EasyCalendar is for you!

Using the code

Plain simple: put the EasyCalendar files (except for demo.html - included in the project zip) in your Web/HTML directory, and make very modifications to your original HTML file (it can be ASP, ASP.NET, PHP whatever...) as demonstrated in the demo.html.

The Javascript code will be like:

    <script language="javascript">
    var activeElement = false;
    function setDate( elementName )  {
      activeElement = document.forms[0].elements[ elementName ];
      var w = window.open("DateSelector.html", "DateSelector", 
        "width=280,height=280,resizable=no,scrollbars=no,
        menu=no,location=no,status=no");
      w.focus();
    }
    function GetDateSelectorDate() { return activeElement.value; }
    function SetDateSelectorDate( dateString ) 
     { activeElement.value = dateString; }
    </script>
    

And supposing you have an <input name="date1" readonly="yes"> where you need to set a valid date, just make an anchor with a javascript event, ex: <a href="javascript:setDate('date1')">Change the date</a> and that's it!

Enjoy!

Conclusion

I have fun making tools in JavaScript and I admire the power of DHTML.