以jcal更改当前日期

时间:2014-09-17 09:34:06

标签: javascript jquery html

我想将当前日期更改为2014年11月,我希望2014年11月22日之前的日期和2015年1月5日之后的日期无法点击,即用户无法选择那些日期。

我的代码:

<table>
<tr>
    <td align=left valign=top >

        Select Number of Days volunteering
        <select id="calOneDays" onChange="$('#calOne').data('days', $('#calOneDays').val());">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
            <option value="13">13</option>
            <option value="14">14</option>
            <option value="15">15</option>
            <option value="16">16</option>
            <option value="17">17</option>
            <option value="18">18</option>
            <option value="19">19</option>
            <option value="20">20</option>
            <option value="21">21</option>
            <option value="22">22</option>
            <option value="23">23</option>
            <option value="24">24</option>
            <option value="25">25</option>
            <option value="26">26</option>
            <option value="27">27</option>
            <option value="28">28</option>
            <option value="29">29</option>
            <option value="30">30</option>
            <option value="31">31</option>
            <option value="32">32</option>
            <option value="33">33</option>
            <option value="34">34</option>
            <option value="35">35</option>
            <option value="36">36</option>
            <option value="37">37</option>
            <option value="38">38</option>
            <option value="39">39</option>
            <option value="40">40</option>
            <option value="41">41</option>
            <option value="42">42</option>
            <option value="43">43</option>
            <option value="44">44</option>
        </select>
    </td>
        </tr>
<tr>
    <td align=left id="calOne" valign=top >

    </td>

</tr>
<tr>

</tr>

$(document).ready(function () {
        $('#calOne').jCal({
            day:            new Date(),
            days:           4,
            showMonths:     3,
            monthSelect:    true,
            dCheck:         function (day) {
                    if ( day.getTime() == (new Date('14/09/2014')).getTime() ) return false;
                    return (day.getDate());
                },
            callback:       function (day, days) {
                    $('#calOneDays').val( days );
                    $(this._target).find('.dInfo').remove();
                    var dCursor = new Date( day.getTime() );
                    for (var di=0; di < days; di++) {
                        var currDay = $(this._target).find('[id*=d_' + ( dCursor.getMonth() + 1 ) + '_' + dCursor.getDate() + '_' + dCursor.getFullYear() + ']');
                        if (currDay.length) currDay.append('<div class="dInfo"></div>');
                        dCursor.setDate( dCursor.getDate() + 1 );
                    }
                    // if calling the function on already selected day(s)
                    if ( typeof $(this._target).data('day') == 'object' &&
                         $(this._target).data('day').getTime() == day.getTime() &&
                         $(this._target).data('days') == days ) {
                        $('#calOneResult').prepend('<div style="clear:both; font-size:7pt;">' + days + ' days starting ' +
                            day.getDate() + '/' + ( day.getMonth() + 1 ) + '/' + day.getFullYear() + ' RECLICKED</div>');
                            var d = day.getDate() + '/' + ( day.getMonth() + 1 ) + '/' + day.getFullYear();
                            alert(d);
                    } else {
                        $('#calOneResult').append('<div style="clear:both; font-size:7pt;">' + days + ' days starting ' +
                            day.getDate() + '/' + ( day.getMonth() + 1 ) + '/' + day.getFullYear() + '</div>');
                            var d = day.getDate() + '/' + ( day.getMonth() + 1 ) + '/' + day.getFullYear();
                            alert(d);
                    }
                    return true;
                }
            });

    });

1 个答案:

答案 0 :(得分:0)

只需在您不想被选中的字段中使用<option disabled>

以下是说明:http://www.w3schools.com/tags/att_option_disabled.asp