tags:

views:

57

answers:

2
Q: 

How to populate two texboxes using a javascript calendar control?

Hi all,

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?

A: 

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;
 2010-08-04 10:09:00
thanks swatis... but i need to populate the same for two text boxes. Its working well for single textbox. I need to send two textbox id's as parameter to the javascript function.How can i achieve this?What modification has to be done in javascript?
Googler  2010-08-04 10:45:56
Please use the HTML code and script code for another textbox again with different Ids .
 2010-08-04 10:53:21
tks and thats fine.. this is the one i had before. What i need exactly is i have two html inputs say textboxes and one script code. Like if i click that calendar image[javascript], on that particular client click itself i need to populate the same value in both the textboxes. On click event,i need to pass two id's as parameters and to poulate the two textboxes on the same event.Is this clear? How can i handle this prob?
Googler  2010-08-04 11:23:38
ok one more solution for you.You can take two text box and use script just for one text box and call a simple javascript function on second textbox's onclick event.And add this simple code in that functionfor Ex:-function fun(){ document.getElementById('field1').value=document.getElementById('field2').value;}May be it's usefull for you.
 2010-08-04 13:06:33
thanks but still u didnt understand what i am coming to say.. i need to do this on calendar control click itself.http://stackoverflow.com/questions/3413978/how-to-customize-this-javascript-calendar-to-update-two-textboxes
Googler  2010-08-05 10:55:49
A: 

You can use the OnChange event of the first input?

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

Edit:

For asp TextBox, do not know if there is a better way, but it works.

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

I could not put the js function name directly in the declaration of the textbox, it should change according to the id of the textbox, then put it in codebehind ...

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

other way:

<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>
 2010-08-04 11:23:58
thanks a lot...but i need to do the same for an aspx control, like a <asp:textbox>. i have mentioned the same code in ontextchanged evnet, but its not working. Is that the right way? how can i do it for a <asp:textbox> without postback.
Googler  2010-08-04 12:14:58

related questions

What JavaScript patterns do you use most?
Javascript events
What style do you use for creating an "class" in JavaScript?
Graphing JavaScript Library
What's the difference in closure style
Getting the text from a drop-down box
How to specify javascript to run when ModalPopupExtender is shown
Length of Javascript Associative Array
How Do I Post and then redirect to an external URL from ASP.Net?
How to set up a CSS switcher in ASP.NET
Wrapping lists into columns
Javascript keyboard events primer? (or rather: help me with my custom dropdown)
Http Auth in a Firefox 3 bookmarklet
Best Debugging Tools for JavaScript/xulrunner Development
How can I turn a string of HTML into a DOM object in a Firefox extension?
Call ASP.NET Function From Javascript?
Javascript troubleshooting tools in IE
MAC addresses in JavaScript
Capturing TAB key in text box
CSS Background Color in Javascript
How can I make the browser see CSS and Javascript changes?
Triple Quotes? How do I delimit a databound Javascript string parameter in ASP.NET?
ASP .Net Custom Client-Side Validation
What JavaScript library would you choose for a new project and why?
Detecting font in JavaScript