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