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

Re: How to create 2 Calendar Menu Button for 2 different input box in one page?

Expand Messages
  • wilson3000ups
    ... Hi, I had the same issue some days ago (http://tech.groups.yahoo.com/group/ydn-javascript/message/23240) At the moment I just put everything with different
    Message 1 of 3 , Jan 2, 2008
    • 0 Attachment
      --- In ydn-javascript@yahoogroups.com, "subratkparida"
      <subratkparida@...> wrote:
      >
      > I am trying to create 2 Calendar Menu Buttons in 2 different input box
      > in field "Start Date" and "End Date".
      >
      > How I can do that?
      >

      Hi,

      I had the same issue some days ago
      (http://tech.groups.yahoo.com/group/ydn-javascript/message/23240)

      At the moment I just put everything with different element ids. Looks
      like this (I wish it would be more elegant):

      HTML:

      _________________________

      <label for="date1">startdate</label>
      <input type="text" id="date1" name="date1" class="datefield" value=""
      /><button type="button" id="show1" title="Show Calendar"><img
      src="/public/img/yui/calbtn.gif" width="18" height="18" alt="Calendar"
      /></button><div id="container1"><div class="hd">Calendar</div><div
      class="bd"><div id="cal1"></div></div></div>

      <label for="date1">Ablaufdatum</label>
      <input type="text" id="date2" name="date2" class="datefield" value=""
      /><button type="button" id="show2" title="Show Calendar"><img
      src="/public/img/yui/calbtn.gif" width="18" height="18" alt="Calendar"
      /></button><div id="container2"><div class="hd">Calendar</div><div
      class="bd"><div id="cal2"></div></div></div>

      _________________________
      (You'll have to change the path to calbtn.gif)


      JS (with german L10N):

      _________________________
      <script type="text/javascript">
      YAHOO.util.Event.onDOMReady(function(){

      var dialog1, calendar1, dialog2, calendar2;

      calendar1 = new YAHOO.widget.Calendar("cal1", {
      iframe:false, // Turn iframe off, since container
      has iframe support.
      hide_blank_weeks:true, // Enable, to demonstrate how we
      handle changing height, using changeContent
      LOCALE_WEEKDAYS:"short",
      START_WEEKDAY: 1
      });

      calendar2 = new YAHOO.widget.Calendar("cal2", {
      iframe:false, // Turn iframe off, since container
      has iframe support.
      hide_blank_weeks:true, // Enable, to demonstrate how we
      handle changing height, using changeContent
      LOCALE_WEEKDAYS:"short",
      START_WEEKDAY: 1
      });

      calendar1.cfg.setProperty("DATE_FIELD_DELIMITER", ".");
      calendar1.cfg.setProperty("MDY_DAY_POSITION", 1);
      calendar1.cfg.setProperty("MDY_MONTH_POSITION", 2);
      calendar1.cfg.setProperty("MDY_YEAR_POSITION", 3);

      calendar1.cfg.setProperty("MD_DAY_POSITION", 1);
      calendar1.cfg.setProperty("MD_MONTH_POSITION", 2);

      // Date labels for German locale
      calendar1.cfg.setProperty("MONTHS_SHORT",
      ["Jan", "Feb", "M\u00E4r", "Apr", "Mai", "Jun", "Jul",
      "Aug", "Sep", "Okt", "Nov", "Dez"]);
      calendar1.cfg.setProperty("MONTHS_LONG",
      ["Januar", "Februar", "M\u00E4rz", "April", "Mai", "Juni",
      "Juli", "August", "September", "Oktober", "November", "Dezember"]);
      calendar1.cfg.setProperty("WEEKDAYS_1CHAR", ["S", "M", "D", "M",
      "D", "F", "S"]);
      calendar1.cfg.setProperty("WEEKDAYS_SHORT", ["So", "Mo", "Di",
      "Mi", "Do", "Fr", "Sa"]);
      calendar1.cfg.setProperty("WEEKDAYS_MEDIUM",["Son", "Mon", "Die",
      "Mit", "Don", "Fre", "Sam"]);
      calendar1.cfg.setProperty("WEEKDAYS_LONG",
      ["Sonntag", "Montag", "Dienstag", "Mittwoch",
      "Donnerstag", "Freitag", "Samstag"]);

      // 2nd cal props
      calendar2.cfg.setProperty("DATE_FIELD_DELIMITER", ".");
      calendar2.cfg.setProperty("MDY_DAY_POSITION", 1);
      calendar2.cfg.setProperty("MDY_MONTH_POSITION", 2);
      calendar2.cfg.setProperty("MDY_YEAR_POSITION", 3);

      calendar2.cfg.setProperty("MD_DAY_POSITION", 1);
      calendar2.cfg.setProperty("MD_MONTH_POSITION", 2);

      // Date labels for German locale
      calendar2.cfg.setProperty("MONTHS_SHORT",
      ["Jan", "Feb", "M\u00E4r", "Apr", "Mai", "Jun", "Jul",
      "Aug", "Sep", "Okt", "Nov", "Dez"]);
      calendar2.cfg.setProperty("MONTHS_LONG",
      ["Januar", "Februar", "M\u00E4rz", "April", "Mai", "Juni",
      "Juli", "August", "September", "Oktober", "November", "Dezember"]);
      calendar2.cfg.setProperty("WEEKDAYS_1CHAR", ["S", "M", "D", "M",
      "D", "F", "S"]);
      calendar2.cfg.setProperty("WEEKDAYS_SHORT", ["So", "Mo", "Di",
      "Mi", "Do", "Fr", "Sa"]);
      calendar2.cfg.setProperty("WEEKDAYS_MEDIUM",["Son", "Mon", "Die",
      "Mit", "Don", "Fre", "Sam"]);
      calendar2.cfg.setProperty("WEEKDAYS_LONG",
      ["Sonntag", "Montag", "Dienstag", "Mittwoch",
      "Donnerstag", "Freitag", "Samstag"]);

      function okHandler() {
      if (calendar1.getSelectedDates().length > 0) {

      var selDate = calendar1.getSelectedDates()[0];

      var dStr = selDate.getDate();
      var mStr = selDate.getMonth() + 1;
      var yStr = selDate.getFullYear();

      YAHOO.util.Dom.get("date1").value = dStr + "." + mStr
      + "." + yStr;
      } else {
      YAHOO.util.Dom.get("date1").value = "";
      }

      if (calendar2.getSelectedDates().length > 0) {

      var selDate = calendar2.getSelectedDates()[0];

      var dStr = selDate.getDate();
      var mStr = selDate.getMonth() + 1;
      var yStr = selDate.getFullYear();

      YAHOO.util.Dom.get("date2").value = dStr + "." + mStr
      + "." + yStr;
      } else {
      YAHOO.util.Dom.get("date2").value = "";
      }

      this.hide();
      }

      function cancelHandler() {
      this.hide();
      }

      dialog1 = new YAHOO.widget.Dialog("container1", {
      context:["show1", "tl", "bl"],
      buttons:[ {text:"Ausw\u00E4hlen", isDefault:true, handler:
      okHandler},
      {text:"Abbrechen", handler: cancelHandler}],
      width:"16em", // Sam Skin dialog needs to have a width
      defined (7*2em + 2*1em = 16em).
      draggable:true,
      close:true
      });

      dialog2 = new YAHOO.widget.Dialog("container2", {
      context:["show2", "tl", "bl"],
      buttons:[ {text:"Ausw\u00E4hlen", isDefault:true, handler:
      okHandler},
      {text:"Abbrechen", handler: cancelHandler}],
      width:"16em", // Sam Skin dialog needs to have a width
      defined (7*2em + 2*1em = 16em).
      draggable:true,
      close:true
      });

      calendar1.render();
      dialog1.render();
      calendar2.render();
      dialog2.render();

      // Using dialog.hide() instead of visible:false is a
      workaround for an IE6/7 container known issue with
      border-collapse:collapse.
      dialog1.hide();
      dialog2.hide();

      calendar1.renderEvent.subscribe(function() {
      dialog1.fireEvent("changeContent");
      });

      calendar2.renderEvent.subscribe(function() {
      dialog2.fireEvent("changeContent");
      });

      YAHOO.util.Event.on("show1", "click", dialog1.show, dialog1,
      true);
      YAHOO.util.Event.on("show2", "click", dialog2.show, dialog2,
      true);
      });
      </script>
      _________________________
    • subratkparida
      Got it. Thank you for looking into this issue. ... input box ... Looks ... value= ... alt= Calendar ... value= ... alt= Calendar ... container ...
      Message 2 of 3 , Jan 2, 2008
      • 0 Attachment
        Got it. Thank you for looking into this issue.

        --- In ydn-javascript@yahoogroups.com, "wilson3000ups"
        <robinnamtab@...> wrote:
        >
        > --- In ydn-javascript@yahoogroups.com, "subratkparida"
        > <subratkparida@> wrote:
        > >
        > > I am trying to create 2 Calendar Menu Buttons in 2 different
        input box
        > > in field "Start Date" and "End Date".
        > >
        > > How I can do that?
        > >
        >
        > Hi,
        >
        > I had the same issue some days ago
        > (http://tech.groups.yahoo.com/group/ydn-javascript/message/23240)
        >
        > At the moment I just put everything with different element ids.
        Looks
        > like this (I wish it would be more elegant):
        >
        > HTML:
        >
        > _________________________
        >
        > <label for="date1">startdate</label>
        > <input type="text" id="date1" name="date1" class="datefield"
        value=""
        > /><button type="button" id="show1" title="Show Calendar"><img
        > src="/public/img/yui/calbtn.gif" width="18" height="18"
        alt="Calendar"
        > /></button><div id="container1"><div class="hd">Calendar</div><div
        > class="bd"><div id="cal1"></div></div></div>
        >
        > <label for="date1">Ablaufdatum</label>
        > <input type="text" id="date2" name="date2" class="datefield"
        value=""
        > /><button type="button" id="show2" title="Show Calendar"><img
        > src="/public/img/yui/calbtn.gif" width="18" height="18"
        alt="Calendar"
        > /></button><div id="container2"><div class="hd">Calendar</div><div
        > class="bd"><div id="cal2"></div></div></div>
        >
        > _________________________
        > (You'll have to change the path to calbtn.gif)
        >
        >
        > JS (with german L10N):
        >
        > _________________________
        > <script type="text/javascript">
        > YAHOO.util.Event.onDOMReady(function(){
        >
        > var dialog1, calendar1, dialog2, calendar2;
        >
        > calendar1 = new YAHOO.widget.Calendar("cal1", {
        > iframe:false, // Turn iframe off, since
        container
        > has iframe support.
        > hide_blank_weeks:true, // Enable, to demonstrate how we
        > handle changing height, using changeContent
        > LOCALE_WEEKDAYS:"short",
        > START_WEEKDAY: 1
        > });
        >
        > calendar2 = new YAHOO.widget.Calendar("cal2", {
        > iframe:false, // Turn iframe off, since
        container
        > has iframe support.
        > hide_blank_weeks:true, // Enable, to demonstrate how we
        > handle changing height, using changeContent
        > LOCALE_WEEKDAYS:"short",
        > START_WEEKDAY: 1
        > });
        >
        > calendar1.cfg.setProperty("DATE_FIELD_DELIMITER", ".");
        > calendar1.cfg.setProperty("MDY_DAY_POSITION", 1);
        > calendar1.cfg.setProperty("MDY_MONTH_POSITION", 2);
        > calendar1.cfg.setProperty("MDY_YEAR_POSITION", 3);
        >
        > calendar1.cfg.setProperty("MD_DAY_POSITION", 1);
        > calendar1.cfg.setProperty("MD_MONTH_POSITION", 2);
        >
        > // Date labels for German locale
        > calendar1.cfg.setProperty("MONTHS_SHORT",
        > ["Jan", "Feb", "M\u00E4r", "Apr", "Mai", "Jun", "Jul",
        > "Aug", "Sep", "Okt", "Nov", "Dez"]);
        > calendar1.cfg.setProperty("MONTHS_LONG",
        >
        ["Januar", "Februar", "M\u00E4rz", "April", "Mai", "Juni",
        > "Juli", "August", "September", "Oktober", "November", "Dezember"]);
        > calendar1.cfg.setProperty("WEEKDAYS_1CHAR",
        ["S", "M", "D", "M",
        > "D", "F", "S"]);
        > calendar1.cfg.setProperty("WEEKDAYS_SHORT",
        ["So", "Mo", "Di",
        > "Mi", "Do", "Fr", "Sa"]);
        > calendar1.cfg.setProperty("WEEKDAYS_MEDIUM",
        ["Son", "Mon", "Die",
        > "Mit", "Don", "Fre", "Sam"]);
        > calendar1.cfg.setProperty("WEEKDAYS_LONG",
        > ["Sonntag", "Montag", "Dienstag", "Mittwoch",
        > "Donnerstag", "Freitag", "Samstag"]);
        >
        > // 2nd cal props
        > calendar2.cfg.setProperty("DATE_FIELD_DELIMITER", ".");
        > calendar2.cfg.setProperty("MDY_DAY_POSITION", 1);
        > calendar2.cfg.setProperty("MDY_MONTH_POSITION", 2);
        > calendar2.cfg.setProperty("MDY_YEAR_POSITION", 3);
        >
        > calendar2.cfg.setProperty("MD_DAY_POSITION", 1);
        > calendar2.cfg.setProperty("MD_MONTH_POSITION", 2);
        >
        > // Date labels for German locale
        > calendar2.cfg.setProperty("MONTHS_SHORT",
        > ["Jan", "Feb", "M\u00E4r", "Apr", "Mai", "Jun", "Jul",
        > "Aug", "Sep", "Okt", "Nov", "Dez"]);
        > calendar2.cfg.setProperty("MONTHS_LONG",
        >
        ["Januar", "Februar", "M\u00E4rz", "April", "Mai", "Juni",
        > "Juli", "August", "September", "Oktober", "November", "Dezember"]);
        > calendar2.cfg.setProperty("WEEKDAYS_1CHAR",
        ["S", "M", "D", "M",
        > "D", "F", "S"]);
        > calendar2.cfg.setProperty("WEEKDAYS_SHORT",
        ["So", "Mo", "Di",
        > "Mi", "Do", "Fr", "Sa"]);
        > calendar2.cfg.setProperty("WEEKDAYS_MEDIUM",
        ["Son", "Mon", "Die",
        > "Mit", "Don", "Fre", "Sam"]);
        > calendar2.cfg.setProperty("WEEKDAYS_LONG",
        > ["Sonntag", "Montag", "Dienstag", "Mittwoch",
        > "Donnerstag", "Freitag", "Samstag"]);
        >
        > function okHandler() {
        > if (calendar1.getSelectedDates().length > 0) {
        >
        > var selDate = calendar1.getSelectedDates()[0];
        >
        > var dStr = selDate.getDate();
        > var mStr = selDate.getMonth() + 1;
        > var yStr = selDate.getFullYear();
        >
        > YAHOO.util.Dom.get("date1").value = dStr + "." +
        mStr
        > + "." + yStr;
        > } else {
        > YAHOO.util.Dom.get("date1").value = "";
        > }
        >
        > if (calendar2.getSelectedDates().length > 0) {
        >
        > var selDate = calendar2.getSelectedDates()[0];
        >
        > var dStr = selDate.getDate();
        > var mStr = selDate.getMonth() + 1;
        > var yStr = selDate.getFullYear();
        >
        > YAHOO.util.Dom.get("date2").value = dStr + "." +
        mStr
        > + "." + yStr;
        > } else {
        > YAHOO.util.Dom.get("date2").value = "";
        > }
        >
        > this.hide();
        > }
        >
        > function cancelHandler() {
        > this.hide();
        > }
        >
        > dialog1 = new YAHOO.widget.Dialog("container1", {
        > context:["show1", "tl", "bl"],
        > buttons:[ {text:"Ausw\u00E4hlen", isDefault:true,
        handler:
        > okHandler},
        > {text:"Abbrechen", handler: cancelHandler}],
        > width:"16em", // Sam Skin dialog needs to have a width
        > defined (7*2em + 2*1em = 16em).
        > draggable:true,
        > close:true
        > });
        >
        > dialog2 = new YAHOO.widget.Dialog("container2", {
        > context:["show2", "tl", "bl"],
        > buttons:[ {text:"Ausw\u00E4hlen", isDefault:true,
        handler:
        > okHandler},
        > {text:"Abbrechen", handler: cancelHandler}],
        > width:"16em", // Sam Skin dialog needs to have a width
        > defined (7*2em + 2*1em = 16em).
        > draggable:true,
        > close:true
        > });
        >
        > calendar1.render();
        > dialog1.render();
        > calendar2.render();
        > dialog2.render();
        >
        > // Using dialog.hide() instead of visible:false is a
        > workaround for an IE6/7 container known issue with
        > border-collapse:collapse.
        > dialog1.hide();
        > dialog2.hide();
        >
        > calendar1.renderEvent.subscribe(function() {
        > dialog1.fireEvent("changeContent");
        > });
        >
        > calendar2.renderEvent.subscribe(function() {
        > dialog2.fireEvent("changeContent");
        > });
        >
        > YAHOO.util.Event.on("show1", "click", dialog1.show,
        dialog1,
        > true);
        > YAHOO.util.Event.on("show2", "click", dialog2.show,
        dialog2,
        > true);
        > });
        > </script>
        > _________________________
        >
      Your message has been successfully submitted and would be delivered to recipients shortly.