Loading ...
Sorry, an error occurred while loading the content.

strange event behavior - linking Calendar and Text Field

Expand Messages
  • Adrian Nye
    I m trying to get a calendar to pop up when I click in the date entry field. Then when I click anywhere else I want it to disappear. If I click on a date in
    Message 1 of 2 , Mar 31, 2009
    • 0 Attachment
      I'm trying to get
      a calendar to pop up when I click in the date entry field. Then
      when I click anywhere else I want it to disappear. If I click on a date in the calendar, I want the new date entered into the Text Field and the calendar to disappear.

      So I created 3 functions:

      displayCal() positions and displays the calendar.
      hideCal() hides the calendar.
      calSelect() sets the text of the input field based on a click in the calendar.

      Here's how I register the listeners:

      calendar = new YAHOO.widget.Calendar("cal1","calendarContainer");
      calendar.selectEvent.subscribe(calSelect, calendar, true);

      YAHOO.util.Event.addListener("id_date", "click", displayCal);
      YAHOO.util.Event.addListener("id_date", "blur", hideCal);

      The problem is the functions get called at the wrong times.
      When I click on the input field (id_date), here's what happens in order:
      1. hideCal called
      2. displayCal called
      3. calSelect called

      Why are 1 and 3 happening? I have only clicked in the input field, not the calendar, therefore 3 should not happen. And there should be no loss of focus for the id_date element when I click in that element,
      so why is 1 happening?

      Thanks

      Here's the complete code (all running onload with my other YUI code):

      var displayCal = function (e) {
      alert('display Cal');
      updateCal();
      var X = Dom.getX('id_date');
      var Y = Dom.getY('id_date');

      Dom.setX('calendarContainer', X);
      Dom.setY('calendarContainer', Y + 30);
      var cal1 = document.getElementById("calendarContainer");

      cal1.style.visibility = 'visible';
      alert(cal1.style.visibility);

      };

      var hideCal = function (e) {
      alert('hide cal');
      var cal1 = document.getElementById("calendarContainer");

      cal1.style.visibility = 'hidden';
      };


      var calSelect = function (type,args,obj) {
      alert('calSelect');
      //sets input field with calendar-selected date
      var dates = args[0];
      var date = dates[0];
      var year = date[0], month = date[1], day = date[2];

      var txtDate1 = document.getElementById("id_date");
      txtDate1.value = month + "/" + day + "/" + year;
      var calContainer = document.getElementById("calendarContainer");
      calContainer.style.visibility = 'hidden';
      };

      calendar = new YAHOO.widget.Calendar("cal1","calendarContainer");
      calendar.selectEvent.subscribe(calSelect, calendar, true);
      //calendar.render();
      YAHOO.util.Event.addListener("id_date", "click", displayCal);
      YAHOO.util.Event.addListener("id_date", "blur", hideCal);
    • bretlevy
      see if this helps any: http://yuihelp.levycodev.com/demos/calendar/multi_cals_on_a_page_help.php Although I do not trap the clicks outside the calendar window,
      Message 2 of 2 , Apr 1, 2009
      • 0 Attachment
        see if this helps any:

        http://yuihelp.levycodev.com/demos/calendar/multi_cals_on_a_page_help.php

        Although I do not trap the clicks outside the calendar window, I have seen it talked about in the forum, so try searching for that explicitly. There may be a demo/example for it already too.

        ~~bret



        --- In ydn-javascript@yahoogroups.com, "Adrian Nye" <adrian_nye@...> wrote:
        >
        > I'm trying to get
        > a calendar to pop up when I click in the date entry field. Then
        > when I click anywhere else I want it to disappear. If I click on a date in the calendar, I want the new date entered into the Text Field and the calendar to disappear.
        >
        > So I created 3 functions:
        >
        > displayCal() positions and displays the calendar.
        > hideCal() hides the calendar.
        > calSelect() sets the text of the input field based on a click in the calendar.
        >
        > Here's how I register the listeners:
        >
        > calendar = new YAHOO.widget.Calendar("cal1","calendarContainer");
        > calendar.selectEvent.subscribe(calSelect, calendar, true);
        >
        > YAHOO.util.Event.addListener("id_date", "click", displayCal);
        > YAHOO.util.Event.addListener("id_date", "blur", hideCal);
        >
        > The problem is the functions get called at the wrong times.
        > When I click on the input field (id_date), here's what happens in order:
        > 1. hideCal called
        > 2. displayCal called
        > 3. calSelect called
        >
        > Why are 1 and 3 happening? I have only clicked in the input field, not the calendar, therefore 3 should not happen. And there should be no loss of focus for the id_date element when I click in that element,
        > so why is 1 happening?
        >
        > Thanks
        >
        > Here's the complete code (all running onload with my other YUI code):
        >
        > var displayCal = function (e) {
        > alert('display Cal');
        > updateCal();
        > var X = Dom.getX('id_date');
        > var Y = Dom.getY('id_date');
        >
        > Dom.setX('calendarContainer', X);
        > Dom.setY('calendarContainer', Y + 30);
        > var cal1 = document.getElementById("calendarContainer");
        >
        > cal1.style.visibility = 'visible';
        > alert(cal1.style.visibility);
        >
        > };
        >
        > var hideCal = function (e) {
        > alert('hide cal');
        > var cal1 = document.getElementById("calendarContainer");
        >
        > cal1.style.visibility = 'hidden';
        > };
        >
        >
        > var calSelect = function (type,args,obj) {
        > alert('calSelect');
        > //sets input field with calendar-selected date
        > var dates = args[0];
        > var date = dates[0];
        > var year = date[0], month = date[1], day = date[2];
        >
        > var txtDate1 = document.getElementById("id_date");
        > txtDate1.value = month + "/" + day + "/" + year;
        > var calContainer = document.getElementById("calendarContainer");
        > calContainer.style.visibility = 'hidden';
        > };
        >
        > calendar = new YAHOO.widget.Calendar("cal1","calendarContainer");
        > calendar.selectEvent.subscribe(calSelect, calendar, true);
        > //calendar.render();
        > YAHOO.util.Event.addListener("id_date", "click", displayCal);
        > YAHOO.util.Event.addListener("id_date", "blur", hideCal);
        >
      Your message has been successfully submitted and would be delivered to recipients shortly.