jQuery UI datepicker - 試圖從點擊日期捕獲點擊事件

Question

我們在我的工作場所使用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); 
}); 

感謝您看我的代碼我很欣賞你們可以提供任何幫助。

Answer 1

你不需要做任何事情來格式化日期。 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/

Answer 2

您的日期選擇器會監聽它。

看到onSelect() function

在選擇了日期選擇器時調用。該函數將所選日期作爲文本並將日期選擇器實例作爲參數。這指的是相關的輸入字段。

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

Answer 3

jQuery Datepicker給出了選項格式日期。那麼你爲什麼不利用它呢？

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

此外，您不需要單獨的方法來捕獲單擊事件。您的默認方法onSelect

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

入住這JSFiddle

Answer 4

$('#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); 
     } 
    });