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

Re: [ydn-javascript] Calendar inside a Container question

Expand Messages
  • Martin Tschofen
    How about a bit different solution. This is based on Dav s example here: http://blog.davglass.com/files/yui/calinput/ Basically I m looking for any input field
    Message 1 of 6 , Aug 25, 2008
      How about a bit different solution. This is based on Dav's example here:

      http://blog.davglass.com/files/yui/calinput/

      Basically I'm looking for any input field with a class of 'i-date' and attach an event to it that brings up one calendar. (I tried attaching it to the document.body, but some of the events didn't seem to fire)...martin

      CMW.ui.Date = function () {
          var YuD = YAHOO.util.Dom,
              YuE = YAHOO.util.Event;
          var cal, field, isVisible = false;
         
          var my = {
              init : function() {
                  cal = new YAHOO.widget.Calendar("i-cal","i-calendar",{navigator:true});
                  cal.hide();
                  cal.selectEvent.subscribe(my.getDate, cal, true);
                  cal.renderEvent.subscribe(my.setHover, cal, true);

                  my.initFields();
                  cal.render();
              },
             
              initFields : function() {
                  var dates = YuD.getElementsByClassName('i-date', 'input', '', function() {   
                      YuE.on(this, 'focus', function(ev){
                          field = this; my.show();
                      });
                      YuE.on(this, 'blur', function(ev){
                          my.hide();
                      });               
                  });

              },
              setHover : function() {
                  YuE.on('i-calendar', 'mouseover', my.over);
                  YuE.on('i-calendar', 'mouseout', my.out);
              },
             
              getDate : function(type,args,obj) {
                  var dates = args[0];
                  var date = dates[0];
                  var year = date[0], month = date[1], day = date[2];
         
                  field.value = month + "/" + day + "/" + year;
                  field.focus();
                  cal.hide();
              },
             
              show : function() {
                  var date = field.value
                  var realDate = new Date(date);
                  if(realDate == "Invalid Date"){realDate = new Date();};
                  if(date) {
                      cal.cfg.setProperty('selected', date);
                      cal.cfg.setProperty('pagedate', realDate, true);
                      cal.render();
                  }
                  var loc = YuD.getXY(field);
                  loc[1] += 20;
                  cal.show();
                  YuD.setXY('i-calendar',loc);
              },
             
              hide : function() {
                  if (!isVisible) {
                      cal.hide();
                  }
              },
             
              over : function() {
                  isVisible = true;
              },
             
              out : function() {
                  isVisible = false;
              }
          }
          return my;
      }();

      On Mon, Aug 25, 2008 at 5:01 PM, B.Zapp <bzappasodi@...> wrote:

      Hello

      I am using the "Calendar inside a Container" in multiple rows of a
      table. Basically, a database pull that will have an input box with the
      pop up calender for each row result.

      I'm able to get it to work only for the first row.
      Anyone have a solution for this?

      Thanks in advance!
      BZ


    • B.Zapp
      Hello again! Let me re-phrase this. I want the same pop up calendar functionality that appears in the last cell of this data table example:
      Message 2 of 6 , Sep 3, 2008
        Hello again!
        Let me re-phrase this.

        I want the same pop up calendar functionality that appears in the last
        cell of this data table example:
        http://developer.yahoo.com/yui/examples/datatable/dt_cellediting_clean.html

        To appear in:
        http://developer.yahoo.com/yui/examples/calendar/calcontainer_clean.html

        This will be a dynamically generated result set of multiple rows
        that will have a date input text field and a calendar pop up.

        I have not been able to get it to work on multiple rows.
        For example a page containing 2 input boxes w/ calendar

        Row 1:

        <div class="box">
        <div class="datefield">
        <label for="date">Date: </label><input type="text" id="date"
        name="date" value="" /><button type="button" id="show" title="Show
        Calendar"><img src="assets/calbtn.gif" width="18" height="18"
        alt="Calendar" ></button>
        </div>
        <div id="container">

        <div class="hd">Calendar</div>
        <div class="bd">
        <div id="cal"></div>
        </div>
        </div>
        </div>

        Row 2:

        <div class="box">
        <div class="datefield">
        <label for="date">Date: </label><input type="text" id="date"
        name="date" value="" /><button type="button" id="show" title="Show
        Calendar"><img src="assets/calbtn.gif" width="18" height="18"
        alt="Calendar" ></button>
        </div>
        <div id="container">

        <div class="hd">Calendar</div>
        <div class="bd">
        <div id="cal"></div>
        </div>
        </div>
        </div>

        Thanks in advance

        BZ



        --- In ydn-javascript@yahoogroups.com, "B.Zapp" <bzappasodi@...> wrote:
        >
        > Hello
        >
        > I am using the "Calendar inside a Container" in multiple rows of a
        > table. Basically, a database pull that will have an input box with the
        > pop up calender for each row result.
        >
        > I'm able to get it to work only for the first row.
        > Anyone have a solution for this?
        >
        > Thanks in advance!
        > BZ
        >
      • bretlevy
        I have not used a shared cal popup inside a datatable, but I do use one in other (panel) cases. See if this demo helps you out:
        Message 3 of 6 , Sep 4, 2008
          I have not used a shared cal popup inside a datatable, but I do use one
          in other (panel) cases. See if this demo helps you out:

          http://sandbox.bluelinkdemo.com/sandbox/caltest1.htm

          ~~bret


          --- In ydn-javascript@yahoogroups.com, "B.Zapp" <bzappasodi@...> wrote:
          >
          > Hello
          >
          > I am using the "Calendar inside a Container" in multiple rows of a
          > table. Basically, a database pull that will have an input box with the
          > pop up calender for each row result.
          >
          > I'm able to get it to work only for the first row.
          > Anyone have a solution for this?
          >
          > Thanks in advance!
          > BZ
          >
        Your message has been successfully submitted and would be delivered to recipients shortly.