<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxcalendar.css">
<script>
window.dhx_globalImgPath = "../../codebase/imgs/";</script>
<script  src="../../codebase/dhtmlxcommon.js"></script>
<script  src="../../codebase/dhtmlxcalendar.js"></script>
<script>
var mCal;
window.onload = function() {
    mCal = new dhtmlxCalendarObject('dhtmlxCalendar', false, {
        isYearEditable: true
    });
    mCal.setYearsRange(2000, 2500);
    mCal.setOnClickHandler(mSelectDate);
    mCal.draw();
}
function mSelectDate() {
    var dateformat = document.getElementById('dateformat').value;
    mCal.setDateFormat(dateformat);
    document.getElementById('mCalInput').innerHTML = mCal.getFormatedDate();
    return true;
}
function setNewDate() {
    var newdateVal = document.getElementById('newdate').value;
    var dateformat = document.getElementById('dateformat').value;
    mCal.setDateFormat(dateformat);
    mCal.setDate(newdateVal);
    document.getElementById('mCalInput').innerHTML = mCal.getFormatedDate();
}</script>
 
<form action="">
<table border="0" cellpadding="5" cellspacing="0">
  <tr>
<td valign="top"><div id="dhtmlxCalendar"></div></td>
<td valign="top">
    <strong>Date Format:</strong><br>
        <input type="text" id="dateformat" style="width: 200px; font-size:14px" value="%d.%m.%Y" />
        <input type="button" value="set" onClick="mSelectDate(mCal.selDate)" /><br>
    <strong>Date from String (use format set above)</strong><br>
        <input type="text" id="newdate" style="width: 200px; font-size:14px" value="24.12.2010" />
        <input type="button" value="set" onClick="setNewDate()" /><br><br>
    <span>Result:</span>
    <div id="mCalInput" style="color: navy; font-size:18px; font-family: Verdana; text-align:center; border: 1px solid navy">&nbsp;</div>
    </td>
  </tr>
  <tr>
<td colspan="2">
<xmp style="color:#999999; font-size: 12px">Date Format Info:
%e [g-] Day of the month without leading zeros (01..31)
%d [gs] Day of the month, 2 digits with leading zeros (01..31)
%j [g-] Day of the year, 3 digits with leading zeros (001..366)
%a [g-] A textual representation of a day, three letters
%W [g-] A full textual representation of the day of the week
%c [g-] Numeric representation of a month, without leading zeros (1..12)
%m [gs] Numeric representation of a month, with leading zeros (01..12)
%b [gs] A short textual representation of a month, three letters (Jan..Dec)
%M [gs] A full textual representation of a month, such as January or March (January..December)
%y [g-] A two digit representation of a year (93..03)
%Y [gs] A full numeric representation of a year, 4 digits (1993..2003)
%% [gs] Char "%"</xmp>
</td>
  </tr>
</table>
</form>