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

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

Expand Messages
  • subratkparida
    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?
    Message 1 of 3 , Dec 31, 2007
    • 0 Attachment
      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?
    • 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 2 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 3 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.