Question

我正在使用jquery ui日期选择器让用户在选择日期时选择日期我有一个隐藏字段，它以备用日期格式添加日期选择器的值。

我需要做的是动态输出隐藏输入的值。

我试过这个但是它似乎只有在用户手动键入日期并且不使用日期选择器图像图标并滚动日历时才有效。

$('#datepicker').keyup(function () {
$('#date-output').text($(this).val());
});

非常感谢任何帮助。

Jquery日期选择器代码

//date pickers
$(function() {
    $( "#datepicker" ).datepicker({
        showOn: "button",
        buttonImage: "images/calendar.gif",
        buttonImageOnly: true,
        dateFormat:"dd/mm/yy",
        minDate: +0,
        altField: "#alternate",
        altFormat: "D MM d",
        onSelect: function(dateText, inst) {
        var suffix = "";
        switch(inst.selectedDay) {
            case '1': case '21': case '31': suffix = 'st'; break;
            case '2': case '22': suffix = 'nd'; break;
            case '3': case '23': suffix = 'rd'; break;
            default: suffix = 'th';
        }

    $("#alternate").val($("#alternate").val() + suffix);
}
        });
    });

HTML

<input name="datepicker" class="calendarInput" type="text" id="datepicker">
<input name="alternate" id="alternate" type="hidden" >
<span id="date-output"></span>

Answer 1

您可以使用onSelect API方法

http://api.jqueryui.com/datepicker/#option-onSelect

Answer 2

DEMO

 onSelect: function(dateText, inst) {
    var suffix = "";
    switch(inst.selectedDay) {
        case '1': case '21': case '31': suffix = 'st'; break;
        case '2': case '22': suffix = 'nd'; break;
        case '3': case '23': suffix = 'rd'; break;
        default: suffix = 'th';
    }

    var val = $("#alternate").val() + suffix;
    $("#alternate").val(val);
    $('#date-output').text(val);
}

Answer 3

您可以使用onSelect事件

$(function() {
    $("#datepicker").datepicker({
        dateFormat: "dd/mm/yy",
        minDate: +0,
        altField: "#alternate",
        altFormat: "D MM d",
        onSelect: function(dateText, inst) {
            debugger
            var suffix = "";
            switch (inst.selectedDay) {
            case '1':
            case '21':
            case '31':
                suffix = 'st';
                break;
            case '2':
            case '22':
                suffix = 'nd';
                break;
            case '3':
            case '23':
                suffix = 'rd';
                break;
            default:
                suffix = 'th';
            }

            $("#alternate").val($("#alternate").val() + suffix);
            $('#date-output').text($(this).val());
        }
    });
});

Live Demo

显示隐藏输入的值

3 个答案: