jQuery datepicker使用选择框

时间:2012-01-11 12:31:29

标签: jquery-ui

我正在尝试实现一个jQuery UI datepicker来处理一系列选择框而不是输入文本框。原因是选择框是自动生成的,我无法更改该代码,因此我无法将其更改为输入文本框。

这是一个典型的日期选择器,我可以让它发挥作用。

enter image description here

然而,对我们来说,我们需要让它与之合作:

enter image description here

以下是HTML:

<div class="DetailRow">
    <div class="Label">
         <span class="Required">*</span>Tour Begin Date:
    </div>
    <div class="Value">
        <select id="EventDateMonth" name="EventDate[Mth]" class="CalendarSelectSmall" style="margin-bottom:3px; ">
            <option value="-1">---</option><option value="1">Jan</option><option value="2">Feb</option><option value="3">Mar</option><option value="4">Apr</option><option value="5">May</option><option value="6">Jun</option><option value="7">Jul</option><option value="8">Aug</option><option value="9">Sep</option><option value="10">Oct</option><option value="11">Nov</option><option value="12">Dec</option>
        </select>
        <select id="EventDateDay" name="EventDate[Day]" class="CalendarSelectSmall" style="margin-bottom:3px; ">
            <option value="-1">---</option><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>
        </select>
        <select id="EventDateYear" name="EventDate[Yr]" class="CalendarSelectSmall" style="margin-bottom:3px; ">
            <option value="-1">---</option><option value="2012">2012</option>
        </select>
        <div>
            (Must be before 31st Dec 2012)
        </div>
    </div>
</div>

任何帮助将不胜感激!

2 个答案:

答案 0 :(得分:2)

答案 1 :(得分:0)

也许你可以调用附加到隐藏输入框的日期选择器,比如说jQuery datepicker图标触发器。单击日历后,您需要将插入隐藏文本框的值子串到相应的下拉列表中。

jQuery icon trigger example