JavaScript NoGray 日历使用带有日历的下拉框而不是输入字段和日历

Question

我正在尝试使用带有下拉输入的 NoGray 日历，而不是通常的输入字段，这样就会有一个日期、月份和年份的下拉框，并且它们会更新日历，日历会更新下拉列表.

我将它作为输入字段，如下所示:

<select id="date1"></select><select id="month1"></select><select id="year1"></select>

<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">
var my_cal1, my_cal2;
ng.ready(function(){
        my_cal1 = new ng.Calendar({
            input: {date:'date1', month:'month1', year:'year1'},
            selected_date:new Date(),display_date:new Date(),
            dates_off:[{date:26, month:11, year:2014},{date:27, month:11, year:2014},{date:28, month:11, year:2014},{date:29, month:11, year:2014},{date:30, month:11, year:2014},{date:31, month:11, year:2014}],
            events:
            {
                onLoad: function()
                {
                    var st_dt = this.get_start_date().clone();
                    console.log(this.is_selectable(st_dt)[0]);
                    while(!this.is_selectable(st_dt)[0])
                    {
                        st_dt = st_dt.from_string('today + 1');
                    }
                    // checking if no dates are selected
                    if (!ng.defined(this.get_selected_date()))
                    {
                        this.select_date(st_dt);
                    }
                    this.set_start_date(st_dt);
                },      
                onDateClick: function(dt)
                {
                    this.select_date(dt);
                }
            }
        });
</script>

此外，我想要的不是显示日历按钮，而是显示带有“打开日历”等文本的链接。

<a href="#" onClick="my_cal1.toggle('THE_DATE_IN_THE_DROP_DOWN_SELECT_BOXES')">Open Calendar</a>

请问如何才能做到这一点，因为我似乎无法弄清楚这一点？

提前致谢。

Answer 1

要使用下拉菜单而不是标准输入框，您需要手动填充值。

这是一个简单的示例(我们使用输入框来简化代码)

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>

你会看到它在http://www.nogray.com/calendar_builder.php?open=cal_1406316577_782工作