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>
<input id="date_input" type="text" size="2">
<input id="month_input" type="text" size="2">
<input id="year_input" type="text" size="4">
<a id="my_cal_toggle" href="#">Open Calendar</a>

<div id="my_cal_container"></div>

<script src="PATH/TO/ng_all.js" type="text/javascript"></script>
<script src="PATH/TO/components/calendar.js" type="text/javascript"></script>

<script type="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 selection
        unselect: 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 close
        mouseup: function(evt){
            evt.stop();
        }
    });
});
</script>

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