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

RE: [ydn-javascript] Re: Setting a Date Format of MM/YYYY

Expand Messages
  • Steven Peterson
    Simon - I m not exactly sure what you re asking in your first question. Can you clarify? In regard to the second question, can you post code that reproduces
    Message 1 of 12 , Nov 30, 2006
    • 0 Attachment

      Simon –

       

      I’m not exactly sure what you’re asking in your first question. Can you clarify? In regard to the second question, can you post code that reproduces that issue? Do any of the examples render incorrectly for you? If I can reproduce the problem, I can attempt to determine what’s causing it.

       

      Thanks!

       

      Steven Peterson

      Web Developer, Platform Engineering

      Yahoo!

       

       

      From: ydn-javascript@yahoogroups.com [mailto:ydn-javascript@yahoogroups.com] On Behalf Of Simon
      Sent: Wednesday, November 29, 2006 9:33 PM
      To: ydn-javascript@yahoogroups.com
      Subject: [ydn-javascript] Re: Setting a Date Format of MM/YYYY

       

      Matt/Steven,
      Thank you for your help. It took a while but everything is working
      now. The new version of the calendar code is much nicer.

      I'm posting the refactored code below as I have a question: I am using
      another members method of wrapping the yahoo code in another class so
      that anyone on my team can create a calendar widget. Can you suggest a
      better way than doing this.blah, noting for example when handleSelect
      () is called and I get the text inputs value but pass in fieldId, as
      this.fieldId doesn't seem to work.

      One last thing I've noticed is that I am creating a Calendar widget
      with a title. When the widget renders the title, in this case "Choose
      a Date" is all on one line but it forces a new line below it with a
      light blue bg color and that obscures the first header row in the
      widget so you cannot see the month. I have the new 0.12 calendar CSS
      and I am not changing the widget size at all.

      Thanks again guys,
      Simon

      ************************************************
      function PopupCalendar( calendarId, containerId, fieldId, buttonId,
      monthYearDisplay) {

      var me = {
      //Constructor
      init: function (calendarId, containerId, fieldId, buttonId,
      monthYearDisplay ) {
      this.calendarId = calendarId;
      this.containerId = containerId;
      this.fieldId = fieldId;
      this.buttonId = buttonId;
      this.monthYearDisplay = new Boolean(monthYearDisplay);
      var temp = this;
      this.calendar = new
      YAHOO.widget.Calendar(this.id,this.containerId, { title:"Choose a
      date:", close:true } );
      this.calendar.selectEvent.subscribe(temp.handleSelect,
      this.calendar, true);
      this.calendar.render();

      // Listener to show the calendar when button is clicked
      YAHOO.util.Event.addListener(this.buttonId, "click",
      this.calendar.show, this.calendar, true);
      YAHOO.util.Event.addListener(this.fieldId, "focus",
      this.calendar.hide, this.calendar, true);
      YAHOO.util.Event.addListener(window, "load", init);

      },

      handleSelect : function(type,args,obj) {
      var dates = args[0];
      var date = dates[0];
      var year = date[0], month = date[1], day = date[2];
      var txtDate1 = document.getElementById(fieldId);
      if(monthYearDisplay) {
      txtDate1.value = month + "/" + year;
      } else {
      txtDate1.value = month + "/" + day + "/" + year;
      }
      },

      };

      me.init(calendarId, containerId, fieldId, buttonId);
      return me;

      }
      ************************************************

      --- In ydn-javascript@yahoogroups.com, "Matt Warden" <mwarden@...> wrote:

      >
      > On 11/29/06, Simon <cobragtk@...> wrote:
      > >
      > > Steven,
      > > Thanks for the update, I am sure your solution will work. Only
      problem
      > > is that now I have switched to the new 0.12 version of the source
      code
      > > and my popup calendar is not working. I used the Dave Glass tutorial
      > > initially - any thoughts on this?
      >
      > This should help:
      > http://developer.yahoo.com/yui/calendar/upgrade.html
      >
      >
      >
      > --
      > Matt Warden
      > Cleveland, OH, USA
      > http://mattwarden.com
      >
      >
      > This email proudly and graciously contributes to entropy.
      >

    • Simon
      Hi Steven, Please disregard the first issue, basically it was my fault my div.title class was overriding the title class in the calendar.css. However I have
      Message 2 of 12 , Dec 6, 2006
      • 0 Attachment
        Hi Steven,
        Please disregard the first issue, basically it was my fault my
        div.title class was overriding the title class in the calendar.css.

        However I have wittled my calendar code down to the following:

        Here is my question: I have added double arrow images and given them
        ids in calendar.js, in the chunk of code that generates the header.
        This works fine but now I would like to add an eventHandler so that
        when user clicks these arrows it toggles the calendar widget year
        forward. If you look at my code below you will see function called
        yearForward(). When I run everything from my page and click the year
        arrow the yearForward() function is successfully being called, however
        I am finding it hard to call nextYear() to moved the date forward a
        year. I am having some issues with getting a handle on the instance of
        the calendar that I need to call these methods on. If you could look
        at my code any help would be appreciated.
        Thanks,
        Simon

        ***********************START JS CODE*********************************
        function PopupCalendar(calendarId, containerId, fieldId, buttonId,
        monthYearDisplay) {

        var me = {
        init: function(calendarId, containerId, fieldId, buttonId,
        monthYearDisplay) {
        this.calendarId = calendarId;
        this.containerId = containerId;
        this.fieldId = fieldId;
        this.buttonId = buttonId;
        this.monthYearDisplay = new Boolean(monthYearDisplay);
        var temp = this;
        var nextYearID = document.getElementById("nextyear");
        this.calendar = new YAHOO.widget.Calendar(this.id,this.containerId,
        {title: "Choose a date:",close:true});
        // Subscribe to event, in this case when a cell or date is clicked
        on in the calendar
        this.calendar.selectEvent.subscribe(temp.handleSelect,
        this.calendar, true);
        this.calendar.yearForward = function() {
        temp.yearForward(this.calendar) };
        this.calendar.render();
        YAHOO.util.Event.addListener(this.buttonId, "click",
        this.calendar.show, this.calendar, true);
        YAHOO.util.Event.addListener(this.fieldId, "focus",
        this.calendar.hide, this.calendar, true);
        YAHOO.util.Event.addListener(nextYearID, "click",
        this.calendar.yearForward, this.calendar, true);
        },
        handleSelect: function(type,args,obj) {
        var dates = args[0];
        var date = dates[0];
        var year = date[0];
        var month = date[1];
        var day = date[2];
        alert(obj.getSelectedDates()[0]);
        var txtDate1 = document.getElementById(fieldId);
        if(monthYearDisplay) {
        txtDate1.value = month + "/" + year;
        } else {
        txtDate1.value = month + "/" + day + "/" + year;
        }
        },
        yearForward: function(obj) {
        alert("MADE IT");
        }
        };

        me.init(calendarId, containerId, fieldId, buttonId, monthYearDisplay);
        return me;

        }
        ***********************END JS CODE*********************************




        --- In ydn-javascript@yahoogroups.com, "Steven Peterson"
        <y_stevenp@...> wrote:
        >
        > Simon -
        >
        >
        >
        > I'm not exactly sure what you're asking in your first question. Can you
        > clarify? In regard to the second question, can you post code that
        reproduces
        > that issue? Do any of the examples render incorrectly for you? If I can
        > reproduce the problem, I can attempt to determine what's causing it.
        >
        >
        >
        > Thanks!
        >
        >
        >
        > Steven Peterson
        >
        > Web Developer, Platform Engineering
        >
        > Yahoo!
        >
        >
        >
        >
        >
        > From: ydn-javascript@yahoogroups.com
        [mailto:ydn-javascript@yahoogroups.com]
        > On Behalf Of Simon
        > Sent: Wednesday, November 29, 2006 9:33 PM
        > To: ydn-javascript@yahoogroups.com
        > Subject: [ydn-javascript] Re: Setting a Date Format of MM/YYYY
        >
        >
        >
        > Matt/Steven,
        > Thank you for your help. It took a while but everything is working
        > now. The new version of the calendar code is much nicer.
        >
        > I'm posting the refactored code below as I have a question: I am using
        > another members method of wrapping the yahoo code in another class so
        > that anyone on my team can create a calendar widget. Can you suggest a
        > better way than doing this.blah, noting for example when handleSelect
        > () is called and I get the text inputs value but pass in fieldId, as
        > this.fieldId doesn't seem to work.
        >
        > One last thing I've noticed is that I am creating a Calendar widget
        > with a title. When the widget renders the title, in this case "Choose
        > a Date" is all on one line but it forces a new line below it with a
        > light blue bg color and that obscures the first header row in the
        > widget so you cannot see the month. I have the new 0.12 calendar CSS
        > and I am not changing the widget size at all.
        >
        > Thanks again guys,
        > Simon
        >
        > ************************************************
        > function PopupCalendar( calendarId, containerId, fieldId, buttonId,
        > monthYearDisplay) {
        >
        > var me = {
        > //Constructor
        > init: function (calendarId, containerId, fieldId, buttonId,
        > monthYearDisplay ) {
        > this.calendarId = calendarId;
        > this.containerId = containerId;
        > this.fieldId = fieldId;
        > this.buttonId = buttonId;
        > this.monthYearDisplay = new Boolean(monthYearDisplay);
        > var temp = this;
        > this.calendar = new
        > YAHOO.widget.Calendar(this.id,this.containerId, { title:"Choose a
        > date:", close:true } );
        > this.calendar.selectEvent.subscribe(temp.handleSelect,
        > this.calendar, true);
        > this.calendar.render();
        >
        > // Listener to show the calendar when button is clicked
        > YAHOO.util.Event.addListener(this.buttonId, "click",
        > this.calendar.show, this.calendar, true);
        > YAHOO.util.Event.addListener(this.fieldId, "focus",
        > this.calendar.hide, this.calendar, true);
        > YAHOO.util.Event.addListener(window, "load", init);
        >
        > },
        >
        > handleSelect : function(type,args,obj) {
        > var dates = args[0];
        > var date = dates[0];
        > var year = date[0], month = date[1], day = date[2];
        > var txtDate1 = document.getElementById(fieldId);
        > if(monthYearDisplay) {
        > txtDate1.value = month + "/" + year;
        > } else {
        > txtDate1.value = month + "/" + day + "/" + year;
        > }
        > },
        >
        > };
        >
        > me.init(calendarId, containerId, fieldId, buttonId);
        > return me;
        >
        > }
        > ************************************************
        >
        > --- In ydn-javascript@yahoogroups.com
        > <mailto:ydn-javascript%40yahoogroups.com> , "Matt Warden" <mwarden@>
        > wrote:
        > >
        > > On 11/29/06, Simon <cobragtk@> wrote:
        > > >
        > > > Steven,
        > > > Thanks for the update, I am sure your solution will work. Only
        > problem
        > > > is that now I have switched to the new 0.12 version of the source
        > code
        > > > and my popup calendar is not working. I used the Dave Glass tutorial
        > > > initially - any thoughts on this?
        > >
        > > This should help:
        > > http://developer.yahoo.com/yui/calendar/upgrade.html
        > >
        > >
        > >
        > > --
        > > Matt Warden
        > > Cleveland, OH, USA
        > > http://mattwarden.com
        > >
        > >
        > > This email proudly and graciously contributes to entropy.
        > >
        >
      • Simon
        Hi Steven, Any chance you have looked at this? Sorry to bother you but I am still unable to set the year with my code below. Thanks, Simon ... Can you ... I
        Message 3 of 12 , Dec 14, 2006
        • 0 Attachment
          Hi Steven,
          Any chance you have looked at this? Sorry to bother you but I am still
          unable to set the year with my code below.

          Thanks,
          Simon
          --- In ydn-javascript@yahoogroups.com, "Simon" <cobragtk@...> wrote:
          >
          > Hi Steven,
          > Please disregard the first issue, basically it was my fault my
          > div.title class was overriding the title class in the calendar.css.
          >
          > However I have wittled my calendar code down to the following:
          >
          > Here is my question: I have added double arrow images and given them
          > ids in calendar.js, in the chunk of code that generates the header.
          > This works fine but now I would like to add an eventHandler so that
          > when user clicks these arrows it toggles the calendar widget year
          > forward. If you look at my code below you will see function called
          > yearForward(). When I run everything from my page and click the year
          > arrow the yearForward() function is successfully being called, however
          > I am finding it hard to call nextYear() to moved the date forward a
          > year. I am having some issues with getting a handle on the instance of
          > the calendar that I need to call these methods on. If you could look
          > at my code any help would be appreciated.
          > Thanks,
          > Simon
          >
          > ***********************START JS CODE*********************************
          > function PopupCalendar(calendarId, containerId, fieldId, buttonId,
          > monthYearDisplay) {
          >
          > var me = {
          > init: function(calendarId, containerId, fieldId, buttonId,
          > monthYearDisplay) {
          > this.calendarId = calendarId;
          > this.containerId = containerId;
          > this.fieldId = fieldId;
          > this.buttonId = buttonId;
          > this.monthYearDisplay = new Boolean(monthYearDisplay);
          > var temp = this;
          > var nextYearID = document.getElementById("nextyear");
          > this.calendar = new YAHOO.widget.Calendar(this.id,this.containerId,
          > {title: "Choose a date:",close:true});
          > // Subscribe to event, in this case when a cell or date is clicked
          > on in the calendar
          > this.calendar.selectEvent.subscribe(temp.handleSelect,
          > this.calendar, true);
          > this.calendar.yearForward = function() {
          > temp.yearForward(this.calendar) };
          > this.calendar.render();
          > YAHOO.util.Event.addListener(this.buttonId, "click",
          > this.calendar.show, this.calendar, true);
          > YAHOO.util.Event.addListener(this.fieldId, "focus",
          > this.calendar.hide, this.calendar, true);
          > YAHOO.util.Event.addListener(nextYearID, "click",
          > this.calendar.yearForward, this.calendar, true);
          > },
          > handleSelect: function(type,args,obj) {
          > var dates = args[0];
          > var date = dates[0];
          > var year = date[0];
          > var month = date[1];
          > var day = date[2];
          > alert(obj.getSelectedDates()[0]);
          > var txtDate1 = document.getElementById(fieldId);
          > if(monthYearDisplay) {
          > txtDate1.value = month + "/" + year;
          > } else {
          > txtDate1.value = month + "/" + day + "/" + year;
          > }
          > },
          > yearForward: function(obj) {
          > alert("MADE IT");
          > }
          > };
          >
          > me.init(calendarId, containerId, fieldId, buttonId, monthYearDisplay);
          > return me;
          >
          > }
          > ***********************END JS CODE*********************************
          >
          >
          >
          >
          > --- In ydn-javascript@yahoogroups.com, "Steven Peterson"
          > <y_stevenp@> wrote:
          > >
          > > Simon -
          > >
          > >
          > >
          > > I'm not exactly sure what you're asking in your first question.
          Can you
          > > clarify? In regard to the second question, can you post code that
          > reproduces
          > > that issue? Do any of the examples render incorrectly for you? If
          I can
          > > reproduce the problem, I can attempt to determine what's causing it.
          > >
          > >
          > >
          > > Thanks!
          > >
          > >
          > >
          > > Steven Peterson
          > >
          > > Web Developer, Platform Engineering
          > >
          > > Yahoo!
          > >
          > >
          > >
          > >
          > >
          > > From: ydn-javascript@yahoogroups.com
          > [mailto:ydn-javascript@yahoogroups.com]
          > > On Behalf Of Simon
          > > Sent: Wednesday, November 29, 2006 9:33 PM
          > > To: ydn-javascript@yahoogroups.com
          > > Subject: [ydn-javascript] Re: Setting a Date Format of MM/YYYY
          > >
          > >
          > >
          > > Matt/Steven,
          > > Thank you for your help. It took a while but everything is working
          > > now. The new version of the calendar code is much nicer.
          > >
          > > I'm posting the refactored code below as I have a question: I am using
          > > another members method of wrapping the yahoo code in another class so
          > > that anyone on my team can create a calendar widget. Can you suggest a
          > > better way than doing this.blah, noting for example when handleSelect
          > > () is called and I get the text inputs value but pass in fieldId, as
          > > this.fieldId doesn't seem to work.
          > >
          > > One last thing I've noticed is that I am creating a Calendar widget
          > > with a title. When the widget renders the title, in this case "Choose
          > > a Date" is all on one line but it forces a new line below it with a
          > > light blue bg color and that obscures the first header row in the
          > > widget so you cannot see the month. I have the new 0.12 calendar CSS
          > > and I am not changing the widget size at all.
          > >
          > > Thanks again guys,
          > > Simon
          > >
          > > ************************************************
          > > function PopupCalendar( calendarId, containerId, fieldId, buttonId,
          > > monthYearDisplay) {
          > >
          > > var me = {
          > > //Constructor
          > > init: function (calendarId, containerId, fieldId, buttonId,
          > > monthYearDisplay ) {
          > > this.calendarId = calendarId;
          > > this.containerId = containerId;
          > > this.fieldId = fieldId;
          > > this.buttonId = buttonId;
          > > this.monthYearDisplay = new Boolean(monthYearDisplay);
          > > var temp = this;
          > > this.calendar = new
          > > YAHOO.widget.Calendar(this.id,this.containerId, { title:"Choose a
          > > date:", close:true } );
          > > this.calendar.selectEvent.subscribe(temp.handleSelect,
          > > this.calendar, true);
          > > this.calendar.render();
          > >
          > > // Listener to show the calendar when button is clicked
          > > YAHOO.util.Event.addListener(this.buttonId, "click",
          > > this.calendar.show, this.calendar, true);
          > > YAHOO.util.Event.addListener(this.fieldId, "focus",
          > > this.calendar.hide, this.calendar, true);
          > > YAHOO.util.Event.addListener(window, "load", init);
          > >
          > > },
          > >
          > > handleSelect : function(type,args,obj) {
          > > var dates = args[0];
          > > var date = dates[0];
          > > var year = date[0], month = date[1], day = date[2];
          > > var txtDate1 = document.getElementById(fieldId);
          > > if(monthYearDisplay) {
          > > txtDate1.value = month + "/" + year;
          > > } else {
          > > txtDate1.value = month + "/" + day + "/" + year;
          > > }
          > > },
          > >
          > > };
          > >
          > > me.init(calendarId, containerId, fieldId, buttonId);
          > > return me;
          > >
          > > }
          > > ************************************************
          > >
          > > --- In ydn-javascript@yahoogroups.com
          > > <mailto:ydn-javascript%40yahoogroups.com> , "Matt Warden" <mwarden@>
          > > wrote:
          > > >
          > > > On 11/29/06, Simon <cobragtk@> wrote:
          > > > >
          > > > > Steven,
          > > > > Thanks for the update, I am sure your solution will work. Only
          > > problem
          > > > > is that now I have switched to the new 0.12 version of the source
          > > code
          > > > > and my popup calendar is not working. I used the Dave Glass
          tutorial
          > > > > initially - any thoughts on this?
          > > >
          > > > This should help:
          > > > http://developer.yahoo.com/yui/calendar/upgrade.html
          > > >
          > > >
          > > >
          > > > --
          > > > Matt Warden
          > > > Cleveland, OH, USA
          > > > http://mattwarden.com
          > > >
          > > >
          > > > This email proudly and graciously contributes to entropy.
          > > >
          > >
          >
        • Eric Miraglia
          Simon, There s an example up that might help you refactor your code -- http://yuiblog.com/sandbox/yui/v012/examples/calendar/yearselection.php This explains in
          Message 4 of 12 , Dec 14, 2006
          • 0 Attachment
            Simon,

            There's an example up that might help you refactor your code --

            http://yuiblog.com/sandbox/yui/v012/examples/calendar/yearselection.php

            This explains in some detail how to wire up a year-navigation control for Calendar.

            Regards,
            Eric

            ______________________________________________
            Eric Miraglia
            Yahoo! Presentation Platform Engineering

            On Dec 14, 2006, at 9:43 AM, Simon wrote:

            Hi Steven,
            Any chance you have looked at this? Sorry to bother you but I am still
            unable to set the year with my code below.

            Thanks,
            Simon
            --- In ydn-javascript@yahoogroups.com, "Simon" <cobragtk@...> wrote:
            >
            > Hi Steven,
            > Please disregard the first issue, basically it was my fault my
            > div.title class was overriding the title class in the calendar.css.
            >
            > However I have wittled my calendar code down to the following:
            >
            > Here is my question: I have added double arrow images and given them
            > ids in calendar.js, in the chunk of code that generates the header.
            > This works fine but now I would like to add an eventHandler so that
            > when user clicks these arrows it toggles the calendar widget year
            > forward. If you look at my code below you will see function called
            > yearForward(). When I run everything from my page and click the year
            > arrow the yearForward() function is successfully being called, however
            > I am finding it hard to call nextYear() to moved the date forward a
            > year. I am having some issues with getting a handle on the instance of
            > the calendar that I need to call these methods on. If you could look
            > at my code any help would be appreciated.
            > Thanks,
            > Simon
            >
            > ***********************START JS CODE*********************************
            > function PopupCalendar(calendarId, containerId, fieldId, buttonId,
            > monthYearDisplay) {
            >
            > var me = {
            > init: function(calendarId, containerId, fieldId, buttonId,
            > monthYearDisplay) {
            > this.calendarId = calendarId;
            > this.containerId = containerId;
            > this.fieldId = fieldId;
            > this.buttonId = buttonId;
            > this.monthYearDisplay = new Boolean(monthYearDisplay);
            > var temp = this;
            > var nextYearID = document.getElementById("nextyear");
            > this.calendar = new YAHOO.widget.Calendar(this.id,this.containerId,
            > {title: "Choose a date:",close:true});
            > // Subscribe to event, in this case when a cell or date is clicked
            > on in the calendar
            > this.calendar.selectEvent.subscribe(temp.handleSelect,
            > this.calendar, true);
            > this.calendar.yearForward = function() {
            > temp.yearForward(this.calendar) };
            > this.calendar.render();
            > YAHOO.util.Event.addListener(this.buttonId, "click",
            > this.calendar.show, this.calendar, true);
            > YAHOO.util.Event.addListener(this.fieldId, "focus",
            > this.calendar.hide, this.calendar, true);
            > YAHOO.util.Event.addListener(nextYearID, "click",
            > this.calendar.yearForward, this.calendar, true);
            > },
            > handleSelect: function(type,args,obj) {
            > var dates = args[0];
            > var date = dates[0];
            > var year = date[0];
            > var month = date[1];
            > var day = date[2];
            > alert(obj.getSelectedDates()[0]);
            > var txtDate1 = document.getElementById(fieldId);
            > if(monthYearDisplay) {
            > txtDate1.value = month + "/" + year;
            > } else {
            > txtDate1.value = month + "/" + day + "/" + year;
            > }
            > },
            > yearForward: function(obj) {
            > alert("MADE IT");
            > }
            > };
            >
            > me.init(calendarId, containerId, fieldId, buttonId, monthYearDisplay);
            > return me;
            >
            > }
            > ***********************END JS CODE*********************************
            >
            >
            >
            >
            > --- In ydn-javascript@yahoogroups.com, "Steven Peterson"
            > <y_stevenp@> wrote:
            > >
            > > Simon -
            > >
            > >
            > >
            > > I'm not exactly sure what you're asking in your first question.
            Can you
            > > clarify? In regard to the second question, can you post code that
            > reproduces
            > > that issue? Do any of the examples render incorrectly for you? If
            I can
            > > reproduce the problem, I can attempt to determine what's causing it.
            > >
            > >
            > >
            > > Thanks!
            > >
            > >
            > >
            > > Steven Peterson
            > >
            > > Web Developer, Platform Engineering
            > >
            > > Yahoo!
            > >
            > >
            > >
            > >
            > >
            > > From: ydn-javascript@yahoogroups.com
            > [mailto:ydn-javascript@yahoogroups.com]
            > > On Behalf Of Simon
            > > Sent: Wednesday, November 29, 2006 9:33 PM
            > > To: ydn-javascript@yahoogroups.com
            > > Subject: [ydn-javascript] Re: Setting a Date Format of MM/YYYY
            > >
            > >
            > >
            > > Matt/Steven,
            > > Thank you for your help. It took a while but everything is working
            > > now. The new version of the calendar code is much nicer.
            > >
            > > I'm posting the refactored code below as I have a question: I am using
            > > another members method of wrapping the yahoo code in another class so
            > > that anyone on my team can create a calendar widget. Can you suggest a
            > > better way than doing this.blah, noting for example when handleSelect
            > > () is called and I get the text inputs value but pass in fieldId, as
            > > this.fieldId doesn't seem to work.
            > >
            > > One last thing I've noticed is that I am creating a Calendar widget
            > > with a title. When the widget renders the title, in this case "Choose
            > > a Date" is all on one line but it forces a new line below it with a
            > > light blue bg color and that obscures the first header row in the
            > > widget so you cannot see the month. I have the new 0.12 calendar CSS
            > > and I am not changing the widget size at all.
            > >
            > > Thanks again guys,
            > > Simon
            > >
            > > ************************************************
            > > function PopupCalendar( calendarId, containerId, fieldId, buttonId,
            > > monthYearDisplay) {
            > >
            > > var me = {
            > > //Constructor
            > > init: function (calendarId, containerId, fieldId, buttonId,
            > > monthYearDisplay ) {
            > > this.calendarId = calendarId;
            > > this.containerId = containerId;
            > > this.fieldId = fieldId;
            > > this.buttonId = buttonId;
            > > this.monthYearDisplay = new Boolean(monthYearDisplay);
            > > var temp = this;
            > > this.calendar = new
            > > YAHOO.widget.Calendar(this.id,this.containerId, { title:"Choose a
            > > date:", close:true } );
            > > this.calendar.selectEvent.subscribe(temp.handleSelect,
            > > this.calendar, true);
            > > this.calendar.render();
            > >
            > > // Listener to show the calendar when button is clicked
            > > YAHOO.util.Event.addListener(this.buttonId, "click",
            > > this.calendar.show, this.calendar, true);
            > > YAHOO.util.Event.addListener(this.fieldId, "focus",
            > > this.calendar.hide, this.calendar, true);
            > > YAHOO.util.Event.addListener(window, "load", init);
            > >
            > > },
            > >
            > > handleSelect : function(type,args,obj) {
            > > var dates = args[0];
            > > var date = dates[0];
            > > var year = date[0], month = date[1], day = date[2];
            > > var txtDate1 = document.getElementById(fieldId);
            > > if(monthYearDisplay) {
            > > txtDate1.value = month + "/" + year;
            > > } else {
            > > txtDate1.value = month + "/" + day + "/" + year;
            > > }
            > > },
            > >
            > > };
            > >
            > > me.init(calendarId, containerId, fieldId, buttonId);
            > > return me;
            > >
            > > }
            > > ************************************************
            > >
            > > --- In ydn-javascript@yahoogroups.com
            > > <mailto:ydn-javascript%40yahoogroups.com> , "Matt

            (Message over 64 KB, truncated)

          • Steven Peterson
            Simon, All you should need to do in order to make a link navigate to the next year is this: YAHOO.util.Event.addListener(nextYearID, click ,
            Message 5 of 12 , Dec 14, 2006
            • 0 Attachment

              Simon,

               

              All you should need to do in order to make a link navigate to the next year is this:

               

              YAHOO.util.Event.addListener(nextYearID, "click",  this.calendar.nextYear, this.calendar, true);

               

              I’ve tested it and it’s working for me. If you still wanted to use your own handler, it would look like this:

               

              yearForward: function(obj) {

                 //alert("MADE IT");

                 this.nextYear();
              }

               

              Since you are using scope correction, “this” represents the Calendar in your handler.

               

              Steven Peterson

              Web Developer, Platform Engineering

              Yahoo!

               

               

              From: ydn-javascript@yahoogroups.com [mailto:ydn-javascript@yahoogroups.com] On Behalf Of Simon
              Sent: Thursday, December 14, 2006 9:44 AM
              To: ydn-javascript@yahoogroups.com
              Subject: [ydn-javascript] Re: Setting a Date Format of MM/YYYY

               

              Hi Steven,
              Any chance you have looked at this? Sorry to bother you but I am still
              unable to set the year with my code below.

              Thanks,
              Simon
              --- In ydn-javascript@yahoogroups.com, "Simon" <cobragtk@...> wrote:

              >
              > Hi Steven,
              > Please disregard the first issue, basically it was my fault my
              > div.title class was overriding the title class in the calendar.css.
              >
              > However I have wittled my calendar code down to the following:
              >
              > Here is my question: I have added double arrow images and given them
              > ids in calendar.js, in the chunk of code that generates the header.
              > This works fine but now I would like to add an eventHandler so that
              > when user clicks these arrows it toggles the calendar widget year
              > forward. If you look at my code below you will see function called
              > yearForward(). When I run everything from my page and click the year
              > arrow the yearForward() function is successfully being called, however
              > I am finding it hard to call nextYear() to moved the date forward a
              > year. I am having some issues with getting a handle on the instance of
              > the calendar that I need to call these methods on. If you could look
              > at my code any help would be appreciated.
              > Thanks,
              > Simon
              >
              > ***********************START JS CODE*********************************
              > function PopupCalendar(calendarId, containerId, fieldId, buttonId,
              > monthYearDisplay) {
              >
              > var me = {
              > init: function(calendarId, containerId, fieldId, buttonId,
              > monthYearDisplay) {
              > this.calendarId = calendarId;
              > this.containerId = containerId;
              > this.fieldId = fieldId;
              > this.buttonId = buttonId;
              > this.monthYearDisplay = new Boolean(monthYearDisplay);
              > var temp = this;
              > var nextYearID = document.getElementById("nextyear");
              > this.calendar = new YAHOO.widget.Calendar(this.id,this.containerId,
              > {title: "Choose a date:",close:true});
              > // Subscribe to event, in this case when a cell or date is clicked
              > on in the calendar
              > this.calendar.selectEvent.subscribe(temp.handleSelect,
              > this.calendar, true);
              > this.calendar.yearForward = function() {
              > temp.yearForward(this.calendar) };
              > this.calendar.render();
              > YAHOO.util.Event.addListener(this.buttonId, "click",
              > this.calendar.show, this.calendar, true);
              > YAHOO.util.Event.addListener(this.fieldId, "focus",
              > this.calendar.hide, this.calendar, true);
              > YAHOO.util.Event.addListener(nextYearID, "click",
              > this.calendar.yearForward, this.calendar, true);
              > },
              > handleSelect: function(type,args,obj) {
              > var dates = args[0];
              > var date = dates[0];
              > var year = date[0];
              > var month = date[1];
              > var day = date[2];
              > alert(obj.getSelectedDates()[0]);
              > var txtDate1 = document.getElementById(fieldId);
              > if(monthYearDisplay) {
              > txtDate1.value = month + "/" + year;
              > } else {
              > txtDate1.value = month + "/" + day + "/" + year;
              > }
              > },
              > yearForward: function(obj) {
              > alert("MADE IT");
              > }
              > };
              >
              > me.init(calendarId, containerId, fieldId, buttonId, monthYearDisplay);
              > return me;
              >
              > }
              > ***********************END JS CODE*********************************
              >
              >
              >
              >
              > --- In ydn-javascript@yahoogroups.com,
              "Steven Peterson"
              > <y_stevenp@> wrote:
              > >
              > > Simon -
              > >
              > >
              > >
              > > I'm not exactly sure what you're asking in your first question.
              Can you
              > > clarify? In regard to the second question, can you post code that
              > reproduces
              > > that issue? Do any of the examples render incorrectly for you? If
              I can
              > > reproduce the problem, I can attempt to determine what's causing it.
              > >
              > >
              > >
              > > Thanks!
              > >
              > >
              > >
              > > Steven Peterson
              > >
              > > Web Developer, Platform Engineering
              > >
              > > Yahoo!
              > >
              > >
              > >
              > >
              > >
              > > From: ydn-javascript@yahoogroups.com
              > [mailto:ydn-javascript@yahoogroups.com]
              > > On Behalf Of Simon
              > > Sent: Wednesday, November 29, 2006 9:33 PM
              > > To: ydn-javascript@yahoogroups.com
              > > Subject: [ydn-javascript] Re: Setting a Date Format of MM/YYYY
              > >
              > >
              > >
              > > Matt/Steven,
              > > Thank you for your help. It took a while but everything is working
              > > now. The new version of the calendar code is much nicer.
              > >
              > > I'm posting the refactored code below as I have a question: I am
              using
              > > another members method of wrapping the yahoo code in another class so
              > > that anyone on my team can create a calendar widget. Can you suggest
              a
              > > better way than doing this.blah, noting for example when handleSelect
              > > () is called and I get the text inputs value but pass in fieldId, as
              > > this.fieldId doesn't seem to work.
              > >
              > > One last thing I've noticed is that I am creating a Calendar widget
              > > with a title. When the widget renders the title, in this case
              "Choose
              > > a Date" is all on one line but it forces a new line below it
              with a
              > > light blue bg color and that obscures the first header row in the
              > > widget so you cannot see the month. I have the new 0.12 calendar CSS
              > > and I am not changing the widget size at all.
              > >
              > > Thanks again guys,
              > > Simon
              > >
              > > ************************************************
              > > function PopupCalendar( calendarId, containerId, fieldId, buttonId,
              > > monthYearDisplay) {
              > >
              > > var me = {
              > > //Constructor
              > > init: function (calendarId, containerId, fieldId, buttonId,
              > > monthYearDisplay ) {
              > > this.calendarId = calendarId;
              > > this.containerId = containerId;
              > > this.fieldId = fieldId;
              > > this.buttonId = buttonId;
              > > this.monthYearDisplay = new Boolean(monthYearDisplay);
              > > var temp = this;
              > > this.calendar = new
              > > YAHOO.widget.Calendar(this.id,this.containerId, { title:"Choose
              a
              > > date:", close:true } );
              > > this.calendar.selectEvent.subscribe(temp.handleSelect,
              > > this.calendar, true);
              > > this.calendar.render();
              > >
              > > // Listener to show the calendar when button is clicked
              > > YAHOO.util.Event.addListener(this.buttonId, "click",
              > > this.calendar.show, this.calendar, true);
              > > YAHOO.util.Event.addListener(this.fieldId, "focus",
              > > this.calendar.hide, this.calendar, true);
              > > YAHOO.util.Event.addListener(window, "load", init);
              > >
              > > },
              > >
              > > handleSelect : function(type,args,obj) {
              > > var dates = args[0];
              > > var date = dates[0];
              > > var year = date[0], month = date[1], day = date[2];
              > > var txtDate1 = document.getElementById(fieldId);
              > > if(monthYearDisplay) {
              > > txtDate1.value = month + "/" + year;
              > > } else {
              > > txtDate1.value = month + "/" + day + "/" + year;
              > > }
              > > },
              > >
              > > };
              > >
              > > me.init(calendarId, containerId, fieldId, buttonId);
              > > return me;
              > >
              > > }
              > > ************************************************
              > >
              > > --- In ydn-javascript@yahoogroups.com
              > > <mailto:ydn-javascript%40yahoogroups.com> , "Matt
              Warden" <mwarden@>
              > > wrote:
              > > >
              > > > On 11/29/06, Simon <cobragtk@> wrote:
              > > > >
              > > > > Steven,
              > > > > Thanks for the update, I am sure your solution will work.
              Only
              > > problem
              > > > > is that now I have switched to the new 0.12 version of the
              source
              > > code
              > > > > and my popup calendar is not working. I used the Dave Glass
              tutorial
              > > > > initially - any thoughts on this?
              > > >
              > > > This should help:
              > > > http://developer.yahoo.com/yui/calendar/upgrade.html
              > > >
              > > >
              > > >
              > > > --
              > > > Matt Warden
              > > > Cleveland, OH, USA
              > > > http://mattwarden.com
              > > >
              > > >
              > > > This email proudly and graciously contributes to entropy.
              > > >
              > >
              >

            • Simon
              Thank you Steven, This worked for me, your help is greatly appreciated. Happy holidays! Simon ... next year ... this.calendar.nextYear, ... your own ... in
              Message 6 of 12 , Dec 21, 2006
              • 0 Attachment
                Thank you Steven,
                This worked for me, your help is greatly appreciated.

                Happy holidays!

                Simon

                --- In ydn-javascript@yahoogroups.com, "Steven Peterson"
                <y_stevenp@...> wrote:
                >
                > Simon,
                >
                >
                >
                > All you should need to do in order to make a link navigate to the
                next year
                > is this:
                >
                >
                >
                > YAHOO.util.Event.addListener(nextYearID, "click",
                this.calendar.nextYear,
                > this.calendar, true);
                >
                >
                >
                > I've tested it and it's working for me. If you still wanted to use
                your own
                > handler, it would look like this:
                >
                >
                >
                > yearForward: function(obj) {
                >
                > //alert("MADE IT");
                >
                > this.nextYear();
                > }
                >
                >
                >
                > Since you are using scope correction, "this" represents the Calendar
                in your
                > handler.
                >
                >
                >
                > Steven Peterson
                >
                > Web Developer, Platform Engineering
                >
                > Yahoo!
                >
                >
                >
                >
                >
                > From: ydn-javascript@yahoogroups.com
                [mailto:ydn-javascript@yahoogroups.com]
                > On Behalf Of Simon
                > Sent: Thursday, December 14, 2006 9:44 AM
                > To: ydn-javascript@yahoogroups.com
                > Subject: [ydn-javascript] Re: Setting a Date Format of MM/YYYY
                >
                >
                >
                > Hi Steven,
                > Any chance you have looked at this? Sorry to bother you but I am still
                > unable to set the year with my code below.
                >
                > Thanks,
                > Simon
                > --- In ydn-javascript@yahoogroups.com
                > <mailto:ydn-javascript%40yahoogroups.com> , "Simon" <cobragtk@> wrote:
                > >
                > > Hi Steven,
                > > Please disregard the first issue, basically it was my fault my
                > > div.title class was overriding the title class in the calendar.css.
                > >
                > > However I have wittled my calendar code down to the following:
                > >
                > > Here is my question: I have added double arrow images and given them
                > > ids in calendar.js, in the chunk of code that generates the header.
                > > This works fine but now I would like to add an eventHandler so that
                > > when user clicks these arrows it toggles the calendar widget year
                > > forward. If you look at my code below you will see function called
                > > yearForward(). When I run everything from my page and click the year
                > > arrow the yearForward() function is successfully being called, however
                > > I am finding it hard to call nextYear() to moved the date forward a
                > > year. I am having some issues with getting a handle on the instance of
                > > the calendar that I need to call these methods on. If you could look
                > > at my code any help would be appreciated.
                > > Thanks,
                > > Simon
                > >
                > > ***********************START JS CODE*********************************
                > > function PopupCalendar(calendarId, containerId, fieldId, buttonId,
                > > monthYearDisplay) {
                > >
                > > var me = {
                > > init: function(calendarId, containerId, fieldId, buttonId,
                > > monthYearDisplay) {
                > > this.calendarId = calendarId;
                > > this.containerId = containerId;
                > > this.fieldId = fieldId;
                > > this.buttonId = buttonId;
                > > this.monthYearDisplay = new Boolean(monthYearDisplay);
                > > var temp = this;
                > > var nextYearID = document.getElementById("nextyear");
                > > this.calendar = new YAHOO.widget.Calendar(this.id,this.containerId,
                > > {title: "Choose a date:",close:true});
                > > // Subscribe to event, in this case when a cell or date is clicked
                > > on in the calendar
                > > this.calendar.selectEvent.subscribe(temp.handleSelect,
                > > this.calendar, true);
                > > this.calendar.yearForward = function() {
                > > temp.yearForward(this.calendar) };
                > > this.calendar.render();
                > > YAHOO.util.Event.addListener(this.buttonId, "click",
                > > this.calendar.show, this.calendar, true);
                > > YAHOO.util.Event.addListener(this.fieldId, "focus",
                > > this.calendar.hide, this.calendar, true);
                > > YAHOO.util.Event.addListener(nextYearID, "click",
                > > this.calendar.yearForward, this.calendar, true);
                > > },
                > > handleSelect: function(type,args,obj) {
                > > var dates = args[0];
                > > var date = dates[0];
                > > var year = date[0];
                > > var month = date[1];
                > > var day = date[2];
                > > alert(obj.getSelectedDates()[0]);
                > > var txtDate1 = document.getElementById(fieldId);
                > > if(monthYearDisplay) {
                > > txtDate1.value = month + "/" + year;
                > > } else {
                > > txtDate1.value = month + "/" + day + "/" + year;
                > > }
                > > },
                > > yearForward: function(obj) {
                > > alert("MADE IT");
                > > }
                > > };
                > >
                > > me.init(calendarId, containerId, fieldId, buttonId, monthYearDisplay);
                > > return me;
                > >
                > > }
                > > ***********************END JS CODE*********************************
                > >
                > >
                > >
                > >
                > > --- In ydn-javascript@yahoogroups.com
                > <mailto:ydn-javascript%40yahoogroups.com> , "Steven Peterson"
                > > <y_stevenp@> wrote:
                > > >
                > > > Simon -
                > > >
                > > >
                > > >
                > > > I'm not exactly sure what you're asking in your first question.
                > Can you
                > > > clarify? In regard to the second question, can you post code that
                > > reproduces
                > > > that issue? Do any of the examples render incorrectly for you? If
                > I can
                > > > reproduce the problem, I can attempt to determine what's causing it.
                > > >
                > > >
                > > >
                > > > Thanks!
                > > >
                > > >
                > > >
                > > > Steven Peterson
                > > >
                > > > Web Developer, Platform Engineering
                > > >
                > > > Yahoo!
                > > >
                > > >
                > > >
                > > >
                > > >
                > > > From: ydn-javascript@yahoogroups.com
                > <mailto:ydn-javascript%40yahoogroups.com>
                > > [mailto:ydn-javascript@yahoogroups.com
                > <mailto:ydn-javascript%40yahoogroups.com> ]
                > > > On Behalf Of Simon
                > > > Sent: Wednesday, November 29, 2006 9:33 PM
                > > > To: ydn-javascript@yahoogroups.com
                > <mailto:ydn-javascript%40yahoogroups.com>
                > > > Subject: [ydn-javascript] Re: Setting a Date Format of MM/YYYY
                > > >
                > > >
                > > >
                > > > Matt/Steven,
                > > > Thank you for your help. It took a while but everything is working
                > > > now. The new version of the calendar code is much nicer.
                > > >
                > > > I'm posting the refactored code below as I have a question: I am
                using
                > > > another members method of wrapping the yahoo code in another
                class so
                > > > that anyone on my team can create a calendar widget. Can you
                suggest a
                > > > better way than doing this.blah, noting for example when
                handleSelect
                > > > () is called and I get the text inputs value but pass in fieldId, as
                > > > this.fieldId doesn't seem to work.
                > > >
                > > > One last thing I've noticed is that I am creating a Calendar widget
                > > > with a title. When the widget renders the title, in this case
                "Choose
                > > > a Date" is all on one line but it forces a new line below it with a
                > > > light blue bg color and that obscures the first header row in the
                > > > widget so you cannot see the month. I have the new 0.12 calendar CSS
                > > > and I am not changing the widget size at all.
                > > >
                > > > Thanks again guys,
                > > > Simon
                > > >
                > > > ************************************************
                > > > function PopupCalendar( calendarId, containerId, fieldId, buttonId,
                > > > monthYearDisplay) {
                > > >
                > > > var me = {
                > > > //Constructor
                > > > init: function (calendarId, containerId, fieldId, buttonId,
                > > > monthYearDisplay ) {
                > > > this.calendarId = calendarId;
                > > > this.containerId = containerId;
                > > > this.fieldId = fieldId;
                > > > this.buttonId = buttonId;
                > > > this.monthYearDisplay = new Boolean(monthYearDisplay);
                > > > var temp = this;
                > > > this.calendar = new
                > > > YAHOO.widget.Calendar(this.id,this.containerId, { title:"Choose a
                > > > date:", close:true } );
                > > > this.calendar.selectEvent.subscribe(temp.handleSelect,
                > > > this.calendar, true);
                > > > this.calendar.render();
                > > >
                > > > // Listener to show the calendar when button is clicked
                > > > YAHOO.util.Event.addListener(this.buttonId, "click",
                > > > this.calendar.show, this.calendar, true);
                > > > YAHOO.util.Event.addListener(this.fieldId, "focus",
                > > > this.calendar.hide, this.calendar, true);
                > > > YAHOO.util.Event.addListener(window, "load", init);
                > > >
                > > > },
                > > >
                > > > handleSelect : function(type,args,obj) {
                > > > var dates = args[0];
                > > > var date = dates[0];
                > > > var year = date[0], month = date[1], day = date[2];
                > > > var txtDate1 = document.getElementById(fieldId);
                > > > if(monthYearDisplay) {
                > > > txtDate1.value = month + "/" + year;
                > > > } else {
                > > > txtDate1.value = month + "/" + day + "/" + year;
                > > > }
                > > > },
                > > >
                > > > };
                > > >
                > > > me.init(calendarId, containerId, fieldId, buttonId);
                > > > return me;
                > > >
                > > > }
                > > > ************************************************
                > > >
                > > > --- In ydn-javascript@yahoogroups.com
                > <mailto:ydn-javascript%40yahoogroups.com>
                > > > <mailto:ydn-javascript%40yahoogroups.com> , "Matt Warden" <mwarden@>
                > > > wrote:
                > > > >
                > > > > On 11/29/06, Simon <cobragtk@> wrote:
                > > > > >
                > > > > > Steven,
                > > > > > Thanks for the update, I am sure your solution will work. Only
                > > > problem
                > > > > > is that now I have switched to the new 0.12 version of the
                source
                > > > code
                > > > > > and my popup calendar is not working. I used the Dave Glass
                > tutorial
                > > > > > initially - any thoughts on this?
                > > > >
                > > > > This should help:
                > > > > http://developer.yahoo.com/yui/calendar/upgrade.html
                > > > >
                > > > >
                > > > >
                > > > > --
                > > > > Matt Warden
                > > > > Cleveland, OH, USA
                > > > > http://mattwarden.com
                > > > >
                > > > >
                > > > > This email proudly and graciously contributes to entropy.
                > > > >
                > > >
                > >
                >
              Your message has been successfully submitted and would be delivered to recipients shortly.