如何使用 JavaScript 日历控件填充两个文本框？

Question

我需要使用日历控件同时在两个文本框中填充日期时间值。就像在客户端单击日历控件一样，该控件中的选定日期应该填充在为开始日期定义的相应文本框中。还有另一个文本框，称为结束日期，也必须在客户端单击时填充相同的值。是否有任何第三方 javascript 文件可以处理这种情况以填充两个文本框。请帮我解决这个问题吗？

Answer 1

在您的页面

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

Answer 2

可以使用第一个输入的OnChange事件吗？

<script type="text/javascript">
    function Text1OnChange() {
        document.getElementById("Text2").value = document.getElementById("Text1").value;
    }
</script>
<input id="Text1" type="text" onchange="Text1OnChange()"/>
<input id="Text2" type="text" />

编辑：

对于asp TextBox，不知道是否有更好的方法，但它有效。

<script type="text/javascript">
    function <%= TextBox1.ClientID  %>OnChange() {
        document.getElementById("<%= TextBox2.ClientID  %>").value = document.getElementById("<%= TextBox1.ClientID  %>").value;
    }
</script>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>

我无法将js函数名称直接放在文本框的声明中，它应该根据文本框的id进行更改，然后将其放在代码隐藏中...

protected void Page_Load(object sender, EventArgs e)
{
    TextBox1.Attributes.Add("onchange", TextBox1.ClientID + "OnChange();");
}

其他方式：

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>

<script type="text/javascript">
    document.getElementById("<%= TextBox1.ClientID  %>").onchange = function () {
        document.getElementById("<%= TextBox2.ClientID  %>").value = document.getElementById("<%= TextBox1.ClientID  %>").value;
    }
</script>