Javascript Nogray Calendar Use Drop Down Boxes With Calendar Instead Of Input Field And Calendar

I am trying to use the NoGray calendar with drop down inputs instead of the usual input field so that there will be a drop down box for the date, month and year and that they updat

Solution 1:

To use drop down menus instead of the standard input box, you'll need to populate the values manually.

Here is a quick example (we used input boxes to simplify the code)

We are using input boxes to simplify the example<br><br><inputid="date_input"type="text"size="2"><inputid="month_input"type="text"size="2"><inputid="year_input"type="text"size="4"><aid="my_cal_toggle"href="#">Open Calendar</a><divid="my_cal_container"></div><scriptsrc="PATH/TO/ng_all.js"type="text/javascript"></script><scriptsrc="PATH/TO/components/calendar.js"type="text/javascript"></script><scripttype="text/javascript">
ng.ready( function() {
    var my_cal = new ng.Calendar({
        object:'my_cal_container'
    });
    my_cal.add_events({
        select: function(dt){
            ng.get('date_input').value = dt.getDate();
            ng.get('month_input').value = dt.getMonth() + 1;
            ng.get('year_input').value = dt.getFullYear();
        },
        // most likely you don't need this since you are forcing selectionunselect: function(){
            ng.get('date_input').value = '';
            ng.get('month_input').value = '';
            ng.get('year_input').value = '';
        }
    });

    ng.get('my_cal_toggle').add_events({
        click: function(evt){
            evt.stop();
            my_cal.toggle('date_input');
        },
        // stopping the auto component closemouseup: function(evt){
            evt.stop();
        }
    });
});
</script>

You an see it working at http://www.nogray.com/calendar_builder.php?open=cal_1406316577_782