首页 > javascript > 如何使用javascript日历控件填充两个texbox?

如何使用javascript日历控件填充两个texbox? (How to populate two texboxes using a javascript calendar control?)

问题

我需要使用日历控件在同一时刻在两个文本框中填充日期时间值。就像在客户端点击日历控件一样,该控件中的所选日期应该在为开始日期定义的相应文本框上获得poulate。还有另一个文本框说enddate,它也必须在客户端点击时填充相同的值。是否有任何第三方javascript文件来处理此方案以填充两个文本框。请帮我解决这个问题?

解决方法

在你的页面中添加这个

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

calendardel.js文件代码

// 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;

}

然后是HTML代码

<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>

然后在脚本部分添加该脚本

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

问题

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?

解决方法

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;
相似信息