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

Re: calendar to edit text field

Expand Messages
  • Adrian Nye
    This code does it. It works like the JQuery datepicker. //calendar stuff // on click in input field, pop it up below id_date input field // highlight current
    Message 1 of 4 , Apr 1 9:11 AM
    • 0 Attachment
      This code does it. It works like the JQuery datepicker.


      //calendar stuff
      // on click in input field, pop it up below id_date input field
      // highlight current date and date in input field
      // on click, place selected date into input field and pop down calendar

      var updateCal = function (calendar) {
      //alert('update cal');
      //sets calendar date from text in input field
      var txtDate1 = document.getElementById("id_date");
      //var cal1 = document.getElementById("cal1");
      if (txtDate1.value !== "") {
      calendar.select(txtDate1.value);
      var selectedDates = calendar.getSelectedDates();
      if (selectedDates.length > 0) {
      var firstDate = selectedDates[0];
      calendar.cfg.setProperty("pagedate", (firstDate.getMonth()+1) + "/" + firstDate.getFullYear());
      calendar.render();
      } else {
      alert("Error: Calendar date not returned");
      }

      }
      };

      var displayCal = function (e, calendar) {

      updateCal(calendar);
      var X = Dom.getX('id_date');
      var Y = Dom.getY('id_date');

      Dom.setX('calendarContainer', X);
      Dom.setY('calendarContainer', Y + 30);
      calendar.show();
      };


      var calSelect = function (type,args,obj) {
      //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;

      obj.hide();
      };

      YAHOO.my.calendar = new YAHOO.widget.Calendar("cal1","calendarContainer");
      YAHOO.my.calendar.selectEvent.subscribe(calSelect, YAHOO.my.calendar, true);
      YAHOO.util.Event.addListener("id_date", "click", displayCal, YAHOO.my.calendar, true);
    • Adrian Nye
      Oops, it still has one problem. If you decide not to change the date and click in another field of the form, it does not dismiss the calendar. I have not
      Message 2 of 4 , Apr 1 10:40 AM
      • 0 Attachment
        Oops, it still has one problem. If you decide not to change the date and click in another field of the form, it does not dismiss the calendar. I have not yet figured out how to do this without
        breaking other functions.

        Strangely, if you register a listener for click events on the body
        or any large div, "this" in the event handler is still the calendar
        no matter where you click on the page.

        --- In ydn-javascript@yahoogroups.com, "Adrian Nye" <adrian_nye@...> wrote:
        >
        >
        > The DataTable has DateCellEditor which allows inline editing of a date.
        > You just click on the date field, use the calendar to edit the date, and
        > click submit.
        >
        > I want to do the same thing outside the DataTable for a form date entry field, and none of the Yahoo Calendar examples seem to address that. Has anyone done this so I don't have to figure it out?
        >
        > Thanks
        >
      • Adrian Nye
        Ok this one is complete. Added click listener on the whole document and then hide the calendar if the click is anywhere except in the calendar or date input
        Message 3 of 4 , Apr 1 11:22 AM
        • 0 Attachment
          Ok this one is complete. Added click listener on the whole document and then hide the calendar if the click is anywhere except in the calendar or date input field.

          var updateCal = function (calendar) {
          //alert('update cal');
          //sets calendar date from text in input field
          var txtDate1 = document.getElementById("id_date");
          //var cal1 = document.getElementById("cal1");
          if (txtDate1.value !== "") {
          calendar.select(txtDate1.value);
          var selectedDates = calendar.getSelectedDates();
          if (selectedDates.length > 0) {
          var firstDate = selectedDates[0];
          calendar.cfg.setProperty("pagedate", (firstDate.getMonth()+1) + "/" + firstDate.getFullYear());
          calendar.render();
          } else {
          alert("Error: Calendar date not returned");
          }

          }
          };

          var displayCal = function (e, calendar) {

          updateCal(calendar);
          var X = Dom.getX('id_date');
          var Y = Dom.getY('id_date');

          Dom.setX('calendarContainer', X);
          Dom.setY('calendarContainer', Y + 30);
          calendar.show();
          };
          var hideCal = function (e, calendar) {
          var target = YAHOO.util.Event.getTarget(e);

          var txtDate = document.getElementById("id_date");

          //this.id == "cal1" no matter where click occurred

          //if not in id_date or calendar, hide

          if ((target != txtDate) && (target != calendar)) {
          calendar.hide();
          }
          };

          var calSelect = function (type,args,obj) {

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

          obj.hide();
          };

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

          YAHOO.util.Event.addListener(document, "click", hideCal, YAHOO.my.calendar, true);
          YAHOO.util.Event.addListener("id_date", "click", displayCal, YAHOO.my.calendar, true);
        Your message has been successfully submitted and would be delivered to recipients shortly.