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

calendar to edit text field

Expand Messages
  • Adrian Nye
    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.
    Message 1 of 4 , Mar 31 1:11 PM
    • 0 Attachment
      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
      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 2 of 4 , Apr 1, 2009
      • 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 3 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 4 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.