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

问题描述

我试图使用NoGray日历与下拉输入，而不是通常的输入字段，以便有一个下拉框中的日期，月和年，他们更新日历和日历更新下拉。

我将其作为一个输入字段使用，如下所示：

 < select id =date1>< / select>< select id =month1>< / select>< select id =year1>< 
 
< script src =PATH / TO / ng_all.jstype =text / javascript>< / script& 
< script src =PATH / TO / components / calendar.jstype =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：30，month：11，year：2014}，{date：31，month：11，月：11，年：2014}]，
事件：
 {
 onLoad：function（）
 {
 var st_dt = this.get_start_date ）; 
 console.log（this.is_selectable（st_dt）[0]）; 
 while（！this.is_selectable（st_dt）[0]）
 {
 st_dt = st_dt .from_string（'today + 1'）; 
} 
 //检查是否没有选择日期
 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>

如何才能做到这一点，因为我似乎不能明白这一点？

提前感谢。

解决方案

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

以下是一个简单示例（我们使用输入框简化代码）

 我们使用输入框来简化示例< br>< br> 
< input id =date_inputtype =textsize =2> 
< input id =month_inputtype =textsize =2> 
< input id =year_inputtype =textsize =4> 
< a id =my_cal_togglehref =＃>打开日历< / a> 
 
< div id =my_cal_container>< / div> 
 
< script src =PATH / TO / ng_all.jstype =text / javascript>< / script& 
< script src =PATH / TO / components / calendar.jstype =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（）; 
}，
 //很可能你不需要这个选择
 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'）; 
}，
 //停止自动组件close 
 mouseup：function（evt）{
 evt.stop（）; 
} 
}）; 
}）; 
< / script> 
  

您可以在

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 update the calendar and the calendar updates the drop downs.

I have it working as a input field like this:

<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>

Also, instead of showing a calendar button, I want is to show a link with text like "Open Calendar".

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

How can this be done please as I can't seem to figure this out?

Thanks in advance.

解决方案

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

这篇关于JavaScript NoGray Calendar使用带有日历的下拉框，而不是输入字段和日历的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！