web-dev-qa-db-ja.com

jQuery UI datepicker-クリックされた日付からクリックイベントをキャプチャしようとしています

私は職場でjquery UI 1.8.23を使用しています。

Datepickerでクリックされた日付をキャプチャして、現在の日付を日付スタンプにフォーマットし、その値を非表示のフォームフィールドに渡すにはどうすればよいですか？

これが私が動作しようとしたいくつかのコードです：

$('.ui-state-default').live('click', function(){
    console.log('date clicked');
    var currentdate = $(this).text();
    var d = currentdate;
    var m = monthFormat($('.ui-datepicker-month').text());
    var y = $('.ui-datepicker-year').text();
    $('a.ui-state-default').removeClass('ui-state-highlight');
    $(this).addClass('ui-state-highlight');

    if (currentdate.length < 2) {
    d = "0" + currentdate;
    }
    var datestamp = y + "-" + m + "-" + d;
    console.log(datestamp);
    $('#dateHidden').val(datestamp);
});

私のコードを見てくれてありがとうございます。

jqueryjquery-uidatepicker
8
James Pickering

日付をフォーマットするために何もする必要はありません。 DatePickerウィジェットが代わりにやってくれます。 altFieldおよびaltFormatプロパティを使用するだけです。

$("#myDatePicker").datepicker({
    // The hidden field to receive the date
    altField: "#dateHidden",
    // The format you want
    altFormat: "yy-mm-dd",
    // The format the user actually sees
    dateFormat: "dd/mm/yy",
    onSelect: function (date) {
        // Your CSS changes, just in case you still need them
        $('a.ui-state-default').removeClass('ui-state-highlight');
        $(this).addClass('ui-state-highlight');
    }
});

ドキュメンテーション：

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

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

デモンストレーション：

http://jsfiddle.net/sFBn2/10/

16
melancia

jQueryDatepickerは、フォーマット日付のオプションを提供します。それを利用してみませんか？

$('element').datepicker({ dateFormat: 'dd-mm-yy' });

また、クリックイベントをキャプチャするための個別のメソッドは必要ありません。デフォルトのメソッドonSelect

$('input').datepicker({
 dateFormat: 'yy-mm-dd',
    onSelect: function (date) {
    //defined your own method here
    alert(date);
    }
})

これをチェックしてください JSFiddle

1
Praveen
$('#calendar').datepicker({
        inline: true,
        firstDay: 1,
        changeMonth: false,
        changeYear: true,
        showOtherMonths: true,
        showMonthAfterYear: false,
        yearRange: "2015:2025",      
        dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
        dateFormat: "yy-mm-dd",
        onSelect: function (date) {
            alert(date);
        }
    });
1
PSN-RaffyBoy81

あなたのデートピッカーはそれを聞きます。

参照 onSelect（）関数

日付ピッカーが選択されたときに呼び出されます。この関数は、選択された日付をテキストとして受け取り、datepickerインスタンスをパラメーターとして受け取ります。これは、関連する入力フィールドを指します。

$('.date-pick').datepicker( {
    onSelect: function(date) {
        //play with date here
    },
----
----
---
0
Suresh Atta