0

ユーザーが日付を選択するときにjqueryuidate pickerを使用して日付を選択しています。別の日付形式で日付ピッカーの値を追加する、非表示のフィールドがあります。

私がする必要があるのは、隠された入力の値を動的に出力することです。

私はこれを試しましたが、ユーザーが手動で日付を入力し、日付ピッカーの画像アイコンを使用せず、カレンダーをスクロールしない場合にのみ機能するようです。

$('#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>
4

3 に答える 3

0

onSelectAPIメソッドを使用できます

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

于 2012-10-19T12:58:11.127 に答える
0

デモ

 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);
}
于 2012-10-19T13:06:39.930 に答える
0

あなたは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());
        }
    });
});​

ライブデモ

于 2012-10-19T13:11:51.427 に答える