jQuery UI datepicker - 试图从点击日期捕获点击事件

我们在我的工作场所使用jQuery UI 1.8.23。jQuery UI datepicker - 试图从点击日期捕获点击事件

如何捕获在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); 
});

感谢您看我的代码我很欣赏你们可以提供任何帮助。

来源

2013-09-05 bitmapshades

你为什么不使用onSelect事件？ http://api.jqueryui.com/datepicker/#option-on选择 – j08691

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

来源

2013-09-05 15:21:02 melancia

以及如何将值输出到隐藏字段？ – bitmapshades

它会自动执行。这就是'altField'的用处。 – melancia

好的，但是如果Chrome开发人员工具在onSelect事件期间没有更新，该如何判断该值是否传递给隐藏字段？ – bitmapshades

您的日期选择器会监听它。

看到onSelect() function

在选择了日期选择器时调用。该函数将所选日期作为文本并将日期选择器实例作为参数。这指的是相关的输入字段。

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

来源

2013-09-05 15:20:29

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

来源

2013-09-05 15:25:18 Praveen

我可以知道downvote的原因吗？ – Praveen

所做的只是在隐藏字段上设置属性class =“hasDatepicker”。（我没有投票自己）。 – bitmapshades

@bitmapshades您正试图将该值分配给隐藏字段。我无法得到你想添加datepicker类的东西？如果我错了，请纠正我。 – 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); 
     } 
    });

来源

2015-05-05 05:27:34

您应该添加描述你的解决方案。 – 2015-05-05 05:47:38

jQuery UI datepicker - 试图从点击日期捕获点击事件

回答

相关问题