Question

我想使用Jquery UI Datepicker让用户从日历中选择日期。但是，我还希望用户必须选择从下拉列表中选择日期： enter image description here

显然，两者可以一起工作 - 如果用户从日历中选择日期，它会更新选择下拉菜单，反之亦然。

我不知道从哪里开始。我可以使用这个html和脚本通过日历填充输入框，但我不知道如何使用下拉列表。

HTML：

<form>
<input name="DDay" id="DDay" tabindex="0" class="date_day" placeholder="day">
<input name="DMonth" id="DMonth" tabindex="0" class="date_month" value="" placeholder="month" />
<input name="DYear" id="DYear" tabindex="0" class="date_year" value="" placeholder="year" />
<input type="hidden" id="datepicker" />

JQuery的：

$(function() {
function populateHidden(dateText){
    var pieces = dateText.split("/");

    $(".date_day").val(pieces[0]);        
    $(".date_month").val(pieces[1]);
    $(".date_year").val(pieces[2]);
}

$( "#datepicker" ).datepicker({

    showOn: "button",
    buttonImage: "/img/calendar.gif",
    buttonImageOnly: true,
    buttonText: "Select date",

    dateFormat: "d/m/yy",        

    changeMonth: true,
    changeYear: true,

    numberOfMonths: 2,

    minDate: +4, 
    maxDate: "+1Y +14D",

    beforeShow: function(dateText, instance) { 
        $("#datepicker").datepicker('setDate', new Date());
    },
    onSelect: populateHidden

})

//get the current date
var todaysDate = new Date();
todaysDate.setDate(todaysDate.getDate() + 4);
//format the date in the right format (add 1 to month because JavaScript counts from 0)
formatDate =        todaysDate.getDate() + '/' + 
                     (todaysDate.getMonth() + 1) + '/' + 
                     todaysDate.getFullYear();
//set the input value
$('#datepicker').val(formatDate); 
populateHidden(formatDate); });

JSFiddle：jsfiddle

Answer 1

使用此代码，我找到了一个解决方案（可能不是最好的，但它可以工作）。

JSFiddle

HTML

<form>
<select name="DDay" id="DDay" tabindex="0" class="date_day">
    <option selected></option>
    <option value=01>01</option>
    <option value=02>02</option>
    <option value=03>03</option>
    <option value=04>04</option>
    <option value=05>05</option>
    <option value=06>06</option>
    <option value=07>07</option>
    <option value=08>08</option>
    <option value=09>09</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 name="DMonth" id="DMonth" tabindex="0" class="date_month" >
    <option selected></option>
    <option value="01">January</option>
    <option value="02">February</option>
    <option value="03">March</option>
    <option value="04">April</option>
    <option value="05">May</option>
    <option value="06">June</option>
    <option value="07">July</option>
    <option value="08">August</option>
    <option value="09">September</option>
    <option value="10">October</option>
    <option value="11">November</option>
    <option value="12">December</option>
</select>

<select name="DYear" id="DYear" tabindex="0" class="date_year">
</select>

<input type="hidden" id="datepicker" />

JQuery的：

$(function() {
function populateHidden(dateText){
    var pieces = dateText.split("/");

    var month = pieces[1];                    
    if (month == 01 ) {
        month = 'January'
    } else if (month == 02 ) {
        month = 'February'
    } else if (month == 03 ) {
        month = 'March'
    } else if (month == 04 ) {
        month = 'April'
    } else if (month == 05 ) {
        month = 'May'
    } else if (month == 06 ) {
        month = 'June'
    } else if (month == 07 ) {
        month = 'July'
    } else if (month == 08 ) {
        month = 'August'
    } else if (month == 09 ) {
        month = 'September'
    } else if (month == 10 ) {
        month = 'October'
    } else if (month == 11 ) {
        month = 'November'
    } else if (month == 12 ) {
        month = 'December'
    }        

    $(".date_day option:first-child").val(pieces[0]);
        $(".date_day option:first-child").text(pieces[0]);
    $(".date_day option").removeAttr("selected");

    $(".date_month option:first-child").val(pieces[1]);
        $(".date_month option:first-child").text(month);
    $(".date_month option").removeAttr("selected");

    $(".date_year").val(pieces[2]);        
}

$( "#datepicker" ).datepicker({

    showOn: "button",
    buttonImage: "/img/calendar.gif",
    buttonImageOnly: true,
    buttonText: "Select date",

    dateFormat: "dd/mm/yy",        

    changeMonth: true,
    changeYear: true,

    numberOfMonths: 2,

    minDate: +4, 
    maxDate: "+1Y +14D",

    beforeShow: function(dateText, instance) { 
        $("#datepicker").datepicker('setDate', new Date());
    },
    onSelect: populateHidden

})

//get the current date
var todaysDate = new Date();
todaysDate.setDate(todaysDate.getDate() + 4);

var dd = todaysDate.getDate();
var mm = todaysDate.getMonth()+1;//January is 0!

var yyyy = todaysDate.getFullYear();
if(dd<10){dd='0'+dd}
if(mm<10){mm='0'+mm}

for (var i = 0; i <= 1; i++) {
    var option = "<option value=" + parseInt(todaysDate.getFullYear() + i) + ">" 
    + parseInt(todaysDate.getFullYear() + i) + "</option>"
    $('[class*=date_year]').append(option);
}

var formatDate = dd+'/'+mm+'/'+yyyy;

//set the input value
$('#datepicker').val(formatDate); 
populateHidden(formatDate); });

为清楚起见，我需要提前1年显示日期。

Jquery UI Datepicker：使用日历和下拉列表（外部日历）

1 个答案: