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

Re: calendar to edit text field

Expand Messages
  • 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 1 of 4 , Apr 1, 2009
    • 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 2 of 4 , Apr 1, 2009
      • 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.