Bind form textbox to calendar control 1

[DotNetGnat]

Guys,

when doing in asp...lets say i have something like this:

<input type="text" name="FromDate" onfocus="showCalendarControl(this);" >

how can do the similar thing using asp.net textbox...what is the equivalent of onfocus...

i tried
<asp:textbox id="subdate" onfocus="showCalendarControl(this);" runat="server">

and obviously it did not work...i have the corresponding css and js files included in the project...

any suggestions...

-DNG

 

[ca8msm]

It should work. The ASP.NET Textbox control simply renders an input tag with a type of text (e.g. the same as your first example). Have a look at both of these that work (but one is the ASP.NET server control):

<input type="text" name="FromDate" onfocus="javascript:alert('hello')">

and

<asp:textbox id="TextBox1" runat="server" onfocus="javascript:alert('hello')"></asp:textbox>

____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

 

[jbenson001]

Try:
[/code]
'Page_Load event ...
subdate.Attributes.Add("onfocus", "showCalenarControl(this);"
[/code]

 

[DotNetGnat]

hmm..i tried both the methods and they did not work...i dont get any errors but when i click in the textbox i dont see the calendar...

i tested dropping a input html textbox instead of asp:textbox and it worked fine for the html textbox??

am i missing something here...

-DNG

 

[jbenson001]

You said you have a .js file. I am not sure how to "include" this in the page so that it sees it. I belive you can still put an Includes statment in the page. This is probably the problem, that it can find that function.

For a test, try my example. Then in the HTML portion of the page put the code of the function in there:

<script>
function showCalenarControl();
.... etc
</script>

This will work. The problem is finding out how to use a .js file in the project.

 

[DotNetGnat]

i think you are correct...

i had these two lines in the head section of the html code...

<LINK href="CalendarControl.css" type="text/css" rel="stylesheet">
<script language="javascript" src="CalendarControl.js"></script>

but this is what i figured out...i just copy pasted your code...

subdate.Attributes.Add("onfocus", "showCalenarControl(this);")

missing the letter "d" in the function name...

and the page throwed an error saying object required...

it means that it is looking for the function...once i corrected the name the error was gone but the calendar was not showing up...

-DNG

 

[jbenson001]

can you post the code of the function? I will create a .js file here and test it and see if i can get it working

 

[jbenson001]

Also check out this link

http://www.codetoad.com/forum/23_24067.asp

 

[DotNetGnat]

sure...here is the code for the .js file

function positionInfo(object) {

  var p_elm = object;

  this.getElementLeft = getElementLeft;
  function getElementLeft() {
    var x = 0;
    var elm;
    if(typeof(p_elm) == "object"){
      elm = p_elm;
    } else {
      elm = document.getElementById(p_elm);
    }
    while (elm != null) {
      x+= elm.offsetLeft;
      elm = elm.offsetParent;
    }
    return parseInt(x);
  }

  this.getElementWidth = getElementWidth;
  function getElementWidth(){
    var elm;
    if(typeof(p_elm) == "object"){
      elm = p_elm;
    } else {
      elm = document.getElementById(p_elm);
    }
    return parseInt(elm.offsetWidth);
  }

  this.getElementRight = getElementRight;
  function getElementRight(){
    return getElementLeft(p_elm) + getElementWidth(p_elm);
  }

  this.getElementTop = getElementTop;
  function getElementTop() {
    var y = 0;
    var elm;
    if(typeof(p_elm) == "object"){
      elm = p_elm;
    } else {
      elm = document.getElementById(p_elm);
    }
    while (elm != null) {
      y+= elm.offsetTop;
      elm = elm.offsetParent;
    }
    return parseInt(y);
  }

  this.getElementHeight = getElementHeight;
  function getElementHeight(){
    var elm;
    if(typeof(p_elm) == "object"){
      elm = p_elm;
    } else {
      elm = document.getElementById(p_elm);
    }
    return parseInt(elm.offsetHeight);
  }

  this.getElementBottom = getElementBottom;
  function getElementBottom(){
    return getElementTop(p_elm) + getElementHeight(p_elm);
  }
}

function CalendarControl() {

  var calendarId = 'CalendarControl';
  var currentYear = 0;
  var currentMonth = 0;
  var currentDay = 0;

  var selectedYear = 0;
  var selectedMonth = 0;
  var selectedDay = 0;

  var months = ['January','February','March','April','May','June','July','August','September','October','November','December'];
  var dateField = null;

  function getProperty(p_property){
    var p_elm = calendarId;
    var elm = null;

    if(typeof(p_elm) == "object"){
      elm = p_elm;
    } else {
      elm = document.getElementById(p_elm);
    }
    if (elm != null){
      if(elm.style){
        elm = elm.style;
        if(elm[p_property]){
          return elm[p_property];
        } else {
          return null;
        }
      } else {
        return null;
      }
    }
  }

  function setElementProperty(p_property, p_value, p_elmId){
    var p_elm = p_elmId;
    var elm = null;

    if(typeof(p_elm) == "object"){
      elm = p_elm;
    } else {
      elm = document.getElementById(p_elm);
    }
    if((elm != null) && (elm.style != null)){
      elm = elm.style;
      elm[ p_property ] = p_value;
    }
  }

  function setProperty(p_property, p_value) {
    setElementProperty(p_property, p_value, calendarId);
  }

  function getDaysInMonth(year, month) {
    return [31,((!(year % 4 ) && ( (year % 100 ) || !( year % 400 ) ))?29:28),31,30,31,30,31,31,30,31,30,31][month-1];
  }

  function getDayOfWeek(year, month, day) {
    var date = new Date(year,month-1,day)
    return date.getDay();
  }

  this.setDate = setDate;
  function setDate(year, month, day) {
    if (dateField) {
      if (month < 10) {month = "0" + month;}
      if (day < 10) {day = "0" + day;}

      var dateString = month+"/"+day+"/"+year;
      dateField.value = dateString;
      hide();
    }
    return;
  }

  this.changeMonth = changeMonth;
  function changeMonth(change) {
    currentMonth += change;
    currentDay = 0;
    if(currentMonth > 12) {
      currentMonth = 1;
      currentYear++;
    } else if(currentMonth < 1) {
      currentMonth = 12;
      currentYear--;
    }

    calendar = document.getElementById(calendarId);
    calendar.innerHTML = calendarDrawTable();
  }

  this.changeYear = changeYear;
  function changeYear(change) {
    currentYear += change;
    currentDay = 0;
    calendar = document.getElementById(calendarId);
    calendar.innerHTML = calendarDrawTable();
  }

  function getCurrentYear() {
    var year = new Date().getYear();
    if(year < 1900) year += 1900;
    return year;
  }

  function getCurrentMonth() {
    return new Date().getMonth() + 1;
  } 

  function getCurrentDay() {
    return new Date().getDate();
  }

  function calendarDrawTable() {

    var dayOfMonth = 1;
    var validDay = 0;
    var startDayOfWeek = getDayOfWeek(currentYear, currentMonth, dayOfMonth);
    var daysInMonth = getDaysInMonth(currentYear, currentMonth);
    var css_class = null; //CSS class for each day

    var table = "<table cellspacing='0' cellpadding='0' border='0'>";
    table = table + "<tr class='header'>";
    table = table + "  <td colspan='2' class='previous'><a href='javascript:changeCalendarControlMonth(-1);'>&lt;</a> <a href='javascript:changeCalendarControlYear(-1);'>&laquo;</a></td>";
    table = table + "  <td colspan='3' class='title'>" + months[currentMonth-1] + "<br>" + currentYear + "</td>";
    table = table + "  <td colspan='2' class='next'><a href='javascript:changeCalendarControlYear(1);'>&raquo;</a> <a href='javascript:changeCalendarControlMonth(1);'>&gt;</a></td>";
    table = table + "</tr>";
    table = table + "<tr><th>S</th><th>M</th><th>T</th><th>W</th><th>T</th><th>F</th><th>S</th></tr>";

    for(var week=0; week < 6; week++) {
      table = table + "<tr>";
      for(var dayOfWeek=0; dayOfWeek < 7; dayOfWeek++) {
        if(week == 0 && startDayOfWeek == dayOfWeek) {
          validDay = 1;
        } else if (validDay == 1 && dayOfMonth > daysInMonth) {
          validDay = 0;
        }

        if(validDay) {
          if (dayOfMonth == selectedDay && currentYear == selectedYear && currentMonth == selectedMonth) {
            css_class = 'current';
          } else if (dayOfWeek == 0 || dayOfWeek == 6) {
            css_class = 'weekend';
          } else {
            css_class = 'weekday';
          }

          table = table + "<td><a class='"+css_class+"' href=\"javascript:setCalendarControlDate("+currentYear+","+currentMonth+","+dayOfMonth+")\">"+dayOfMonth+"</a></td>";
          dayOfMonth++;
        } else {
          table = table + "<td class='empty'>&nbsp;</td>";
        }
      }
      table = table + "</tr>";
    }

    table = table + "<tr class='header'><th colspan='7' style='padding: 3px;'><a href='javascript:hideCalendarControl();'>Close</a></td></tr>";
    table = table + "</table>";

    return table;
  }

  this.show = show;
  function show(field) {
  
    // If the calendar is visible and associated with
    // this field do not do anything.
    if (dateField == field) {
      return;
    } else {
      dateField = field;
    }

    if(dateField) {
      try {
        var dateString = new String(dateField.value);
        var dateParts = dateString.split("/");
        
        selectedMonth = parseInt(dateParts[0],10);
        selectedDay = parseInt(dateParts[1],10);
        selectedYear = parseInt(dateParts[2],10);
      } catch(e) {}
    }

    if (!(selectedYear && selectedMonth && selectedDay)) {
      selectedMonth = getCurrentMonth();
      selectedDay = getCurrentDay();
      selectedYear = getCurrentYear();
    }

    currentMonth = selectedMonth;
    currentDay = selectedDay;
    currentYear = selectedYear;

    if(document.getElementById){

      calendar = document.getElementById(calendarId);
      calendar.innerHTML = calendarDrawTable(currentYear, currentMonth);

      setElementProperty('display', 'block', 'CalendarControlIFrame');
      setProperty('display', 'block');

      var fieldPos = new positionInfo(dateField);
      var calendarPos = new positionInfo(calendarId);

      var x = fieldPos.getElementLeft();
      var y = fieldPos.getElementBottom();

      setProperty('left', x + "px");
      setProperty('top', y + "px");
      setElementProperty('left', x + "px", 'CalendarControlIFrame');
      setElementProperty('top', y + "px", 'CalendarControlIFrame');
      setElementProperty('width', calendarPos.getElementWidth() + "px", 'CalendarControlIFrame');
      setElementProperty('height', calendarPos.getElementHeight() + "px", 'CalendarControlIFrame');
    }
  }

  this.hide = hide;
  function hide() {
    if(dateField) {
      setProperty('display', 'none');
      setElementProperty('display', 'none', 'CalendarControlIFrame');
      dateField = null;
    }
  }
}

var calendarControl = new CalendarControl();

function showCalendarControl(textField) {
  calendarControl.show(textField);
}

function hideCalendarControl() {
  calendarControl.hide();
}

function setCalendarControlDate(year, month, day) {
  calendarControl.setDate(year, month, day);
}

function changeCalendarControlYear(change) {
  calendarControl.changeYear(change);
}

function changeCalendarControlMonth(change) {
  calendarControl.changeMonth(change);
}

document.write("<iframe id='CalendarControlIFrame' src='javascript:false;' frameBorder='0' scrolling='no'></iframe>");
document.write("<div id='CalendarControl'></div>");

-DNG

 

[jbenson001]

Ok so far what I did was cut and past this code into the page itself. I got it to work. I will try creating an external .js file and see what happens.

Jim

 

[DotNetGnat]

ok..thanks for helping me out Jim...so you just pasted the code inside the script tags inside the head tags...is that correct...

-DNG

 

[ca8msm]

Using an external .js file (i.e. when you add it into the page using <script language="javascript" src="CalendarControl.js"></script>) shouldn't have any effect on whether it works or not.

Try a simple example with a function that just shows an alert (with the function inside the page) and then move it to an external js file. You'll see that it still works so that isn't the problem.


____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

 

[DotNetGnat]

I understand and agree with you ca8msm. The thing is that it is not working for me...and i am not sure what the reason could be.

Thanks

-DNG

 

[ca8msm]

OK, the best thing to do it to paste the html that is generated when the page runs (i.e. from the view source) as we can put that with the js file to see what may be wrong.

Also, if you are using visual studio, you can actually debug the javascript to see if there is anything wrong.


____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

 

[jbenson001]

Yes, I just copied the code and placed it in the page in the <script> tags. However, I just did another test. I created the .js file with the code you supplied and referenced it in the page:

<script language="javascript" src="CalendarControl.js"></script>

I then added an attribute to the textbox:

 TextBox1.Attributes.Add("onfocus", "showCalendarControl(this);")

This also worked for me.

Maybe check that the .js file is complete. You could also create the page again from scratch. Maybe there is something you missed.

Jim

 

[DotNetGnat]

ok guys, thanks so much for all your help...we all were correct...i found the problem and expecting an alternative from you guys...

my text box code is like this...

<asp:textbox id="subdate" tabIndex="3" runat="server"></asp:textbox>
<asp:requiredfieldvalidator id="subdatefv" runat="server" ErrorMessage="Please Enter Submission Date" ControlToValidate="subdate" Font-Size="XX-Small"></asp:requiredfieldvalidator>

now as you guys can see i have the required field validator control validating this field...when i removed the required field validator control..the calendar worked fine...

how can i achieve both the calendar and the required field validator...can i??

any suggestions...

-DNG

 

[jbenson001]

I just place the required field validtor to my page. It still worked just fine. There must be something else on the page, or just something funky going on. I would recreate the page, and put minimal controls on it. First start with just the textbox and make sure the calendar works, then add the reuiredfieldvalidator.

Jim

 

[ca8msm]

You could run the validation on the server yourself to make sure it exists and get rid of the <asp:requiredfieldvalidator>.

Or, you could write your own javascript "required field" function and add that to the onclick event of the submit button.


____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

 

[DotNetGnat]

its just the position of the date text box field in the form that is avoiding the calendar to show up...

all my fields are inside a table...if i make the date field text box at the end of the table...the calendar shows up...

dont understand how to get rid of this problem...

-DNG

 

[jbenson001]

Seems like a js issue. I didn't look too closly at the code, but is there code that positions the calendar relative to the textbox? You may have to monkey around with that. Or you can modify the code to put the calendar in a pop up, this way it won't matter where your controls are.