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
  • subratkparida
    Got it. Thank you for looking into this issue. ... input box ... Looks ... value= ... alt= Calendar ... value= ... alt= Calendar ... container ...
    Message 1 of 3 , Jan 2, 2008
      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.