jquery - 显示隐藏输入的值

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

你可以使用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());
        }
    });
});​

现场演示

Answer 3

演示

 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);
}