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