Question

I need to populate the date time values in two textboxes at a same instant using a calendar control. Like on client side click of calendar control, the selected date in that control should get poulate on the corresponding textbox defined for say start date. There is an another textbox say enddate which also have to be populated with the same value on client click. Is there any third party javascript file to handle this scenario to populate two textboxes. Pls help me out on this?

Answer 1

Add this in ur page

<script language="JavaScript" src="calendardel.js"></script>

calendardel.js file code

// if two digit year input dates after this year considered 20 century.

var NUM_CENTYEAR = 30;

// is time input control required by default

var BUL_TIMECOMPONENT = false;

// are year scrolling buttons required by default

var BUL_YEARSCROLL = true;



var calendars = [];

var RE_NUM = /^\-?\d+$/;



function calendardel(obj_target) {



    // assing methods

    this.gen_date = cal_gen_date1;

    this.gen_time = cal_gen_time1;

    this.gen_tsmp = cal_gen_tsmp1;

    this.prs_date = cal_prs_date1;

    this.prs_time = cal_prs_time1;

    this.prs_tsmp = cal_prs_tsmp1;

    this.popupdel = cal_popup1del;



    // validate input parameters

    if (!obj_target)

        return cal_error("Error calling the calendar: no target control specified");

    if (obj_target.value == null)

        return cal_error("Error calling the calendar: parameter specified is not valid target control");

    this.target = obj_target;

    this.time_comp = BUL_TIMECOMPONENT;

    this.year_scroll = BUL_YEARSCROLL;



    // register in global collections

    this.id = calendars.length;

    calendars[this.id] = this;

}



function cal_popup1del (str_datetime) {



    this.dt_current = this.prs_tsmp(str_datetime ? str_datetime : this.target.value);

    if (!this.dt_current) return;



    var obj_calwindow = window.open(

        'calendardel.html?datetime=' + this.dt_current.valueOf()+ '&id=' + this.id,

        'Calendar', 'width=200,height='+(this.time_comp ? 265 : 230)+

        ',status=no,resizable=no,top=200,left=200,dependent=yes,alwaysRaised=yes'

    );

    obj_calwindow.opener = window;

    obj_calwindow.focus();

}



// timestamp generating function

function cal_gen_tsmp1 (dt_datetime) {

    return(this.gen_date(dt_datetime) + ' ' + this.gen_time(dt_datetime));

}



// date generating function

function cal_gen_date1 (dt_datetime) {

var ARR_MONTHS1 = ["Jan", "Feb", "Mar", "Apr", "May", "Jun","Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

var month=ARR_MONTHS1[eval(dt_datetime.getMonth())]; //previous code in place of month=(dt_datetime.getMonth() < 9 ? '0' : '') +dt_datetime.getMonth() + 1

//  alert(month);

    return (

        (dt_datetime.getDate() < 10 ? '0' : '') + dt_datetime.getDate() + "-"

        + (month) + "-"

        + dt_datetime.getFullYear()

    );

}

// time generating function

function cal_gen_time1 (dt_datetime) {

    return (

        (dt_datetime.getHours() < 10 ? '0' : '') + dt_datetime.getHours() + ":"

        + (dt_datetime.getMinutes() < 10 ? '0' : '') + (dt_datetime.getMinutes()) + ":"

        + (dt_datetime.getSeconds() < 10 ? '0' : '') + (dt_datetime.getSeconds())

    );

}



// timestamp parsing function

function cal_prs_tsmp1 (str_datetime) {

    // if no parameter specified return current timestamp

   if (!str_datetime)

        return (new Date());



    // if positive integer treat as milliseconds from epoch

    if (RE_NUM.exec(str_datetime))

        return new Date(str_datetime);



  var arr_date=str_datetime.split('-');

  if(arr_date.length!=3)

     {

       str_datetime="";

      this.target.value="";

        return new Date(str_datetime);

     }

    // else treat as date in string format

//=====================================================================\\    

//=====================================================================\\    

    var arr_datetime = str_datetime.split(' ');

    return this.prs_time(arr_datetime[1], this.prs_date(arr_datetime[0]));

}



// date parsing function

function cal_prs_date1del (str_dateField) {
//=====================================================================\\    
//=====================================================================\\    
str_date=str_dateField.value;
//alert(str_date);
//if not str_date field is a value======\\
    if(!str_date)
        str_date = str_dateField;
//=====================================================================\\    
//=====================================================================\\    
if(str_dateField.value=="")
   return true;
var validmonth=false;
var Month=0;
var ARR_MONTH = ["JAN", "FEB", "MAR", "APR", "MAY", "JUN","JUL", "AUG", "SEP", "OCT", "NOV", "DEC"];
    var arr_date = str_date.split('-');
    if(arr_date.length >3)
     {
        str_dateField.value = '';
        str_dateField.focus();
       alert("Invalid date format: '" + str_date + "'.\nFormat accepted is DD-MON-YYYY.");
       return false;
     }
//=====================================================================\\    
//=====================================================================\\    
    //===========if date format is dd-mon-yyyy================================
    if(arr_date.length == 3)
    {
        //=====================================================================\\    
            var mon=arr_date[1];
            mon=mon.toUpperCase(mon);
            for(i=0;i<ARR_MONTH.length;i++)
             {
               if(mon==ARR_MONTH[i])
               {
                 Month=i+1;
                 validmonth=true;
                 break;
               }
             }

        //=====================================================================\\
        if (arr_date.length < 3)
        {
          str_dateField.value = '';
          str_dateField.focus();
         return cal_error ("Invalid date format: '" + str_date + "'.\nFormat accepted is DD-MON-YYYY.");
        }
        if (!arr_date[0]) 
        {
          str_dateField.value = '';
          str_dateField.focus();
          return cal_error ("Invalid date format: '" + str_date + "'.\nNo day of month value can be found.");
        }
        if (!RE_NUM.exec(arr_date[0]))
        {
          str_dateField.value = '';
          str_dateField.focus();
         return cal_error ("Invalid day of month value: '" + arr_date[0] + "'.\nAllowed values are unsigned integers.");
        }
        if (!arr_date[1]) 
        {
          str_dateField.value = '';
          str_dateField.focus();
        return cal_error ("Invalid date format: '" + str_date + "'.\nNo month value can be found.");
        }
        if (validmonth==false)
        {
          str_dateField.value = '';
          str_dateField.focus();
         return cal_error ("Invalid month value: '" + arr_date[1] + "'.\nAllowed values are month abbr..");
        }
        if (!arr_date[2])
        {
          str_dateField.value = '';
          str_dateField.focus();
         return cal_error ("Invalid date format: '" + str_date + "'.\nNo year value can be found.");
        }
        if (!RE_NUM.exec(arr_date[2]))
        {
          str_dateField.value = '';
          str_dateField.focus();
          return cal_error ("Invalid year value: '" + arr_date[2] + "'.\nAllowed values are unsigned integers.");
        }
        var dt_date = new Date();
        dt_date.setDate(1);

        if (Month < 1 || Month > 12) return cal_error ("Invalid month value: '" + arr_date[1] + "'.\nAllowed range is 01-12.");
        dt_date.setMonth(Month-1);

        if (arr_date[2] < 100) arr_date[2] = Number(arr_date[2]) + (arr_date[2] < NUM_CENTYEAR ? 2000 : 1900);
        dt_date.setFullYear(arr_date[2]);

        var dt_numdays = new Date(arr_date[2], Month, 0);
        dt_date.setDate(arr_date[0]);
        if (dt_date.getMonth() != (Month-1)) return cal_error ("Invalid day of month value: '" + arr_date[0] + "'.\nAllowed range is 01-"+dt_numdays.getDate()+".");

        return (dt_date)
    }
    else    //====date format is mon-yyyy or hh-yyyy or qq-yyyy or yyyy
    {
            if(arr_date.length == 1)
            {
                    //check for year value only
                    if (!RE_NUM.exec(arr_date[0]))
                    {
                      str_dateField.value = '';
                      str_dateField.focus();
                      return cal_error ("Invalid year value: '" + arr_date[0] + "'.\nAllowed values are unsigned integers.");
                    }
            }
            else
            {
                if(arr_date[0].length == 3) //========check for month validity
                {
                //=====================================================================\\    
                    var mon=arr_date[0];
                    mon=mon.toUpperCase(mon);
                    for(i=0;i<ARR_MONTH.length;i++)
                     {
                       if(mon==ARR_MONTH[i])
                       {
                         Month=i+1;
                         validmonth=true;
                         break;
                       }
                     }
                //=====================================================================\\
                    if (validmonth==false)
                    {
                      str_dateField.value = '';
                      str_dateField.focus();
                     return cal_error ("Invalid month value: '" + arr_date[0] + "'.\nAllowed values are month abbr..");
                    }
                //=====================================================================\\
                }
                else
                {
                        //=========check for hh/qq
                    if(arr_date[0]== 'H2' || arr_date[0]== 'H1' || arr_date[0]== 'Q1' || arr_date[0]== 'Q2' || arr_date[0]== 'Q3' || arr_date[0]== 'Q4')
                    {
                    }
                    else
                    {
                        str_dateField.value = '';
                        str_dateField.focus();
                         return cal_error ("Invalid date format: '" + str_date + "'.\nFormat accepted is DD-MON-YYYY.");
                    }
                }
                //=====================================================================\\
                //=====================================================================\\
            }
    }
}



// time parsing function

function cal_prs_time1 (str_time, dt_date) {



    if (!dt_date) return null;

    var arr_time = String(str_time ? str_time : '').split(':');



    if (!arr_time[0]) dt_date.setHours(0);

    else if (RE_NUM.exec(arr_time[0])) 

        if (arr_time[0] < 24) dt_date.setHours(arr_time[0]);

        else return cal_error ("Invalid hours value: '" + arr_time[0] + "'.\nAllowed range is 00-23.");

    else return cal_error ("Invalid hours value: '" + arr_time[0] + "'.\nAllowed values are unsigned integers.");



    if (!arr_time[1]) dt_date.setMinutes(0);

    else if (RE_NUM.exec(arr_time[1]))

        if (arr_time[1] < 60) dt_date.setMinutes(arr_time[1]);

        else return cal_error ("Invalid minutes value: '" + arr_time[1] + "'.\nAllowed range is 00-59.");

    else return cal_error ("Invalid minutes value: '" + arr_time[1] + "'.\nAllowed values are unsigned integers.");



    if (!arr_time[2]) dt_date.setSeconds(0);

    else if (RE_NUM.exec(arr_time[2]))

        if (arr_time[2] < 60) dt_date.setSeconds(arr_time[2]);

        else return cal_error ("Invalid seconds value: '" + arr_time[2] + "'.\nAllowed range is 00-59.");

    else return cal_error ("Invalid seconds value: '" + arr_time[2] + "'.\nAllowed values are unsigned integers.");



    dt_date.setMilliseconds(0);

    return dt_date;

}



function cal_error (str_message) {

    alert (str_message);

    return null;

}

then HTML code

<input name="dat" type="text" id="dat" size="11" maxlength="11" tabindex="1" value=""> 

<a href="javascript:cal1.popupdel();"><img src="img/cal.gif" alt="Click here to pick up the date" width="16" height="16" border="0" align="absmiddle"></a>

and then add that script in script part

var cal1= new calendardel(document.forms['formname'].elements['dat']);
    cal1.year_scroll = true;
    cal1.time_comp = false;