如何从 jQuery UI datepicker 获取日期

Question

每当用户在 jQuery UI datepicker 中选择日期并单击表单上的按钮时，我都想从 datepicker 获取日期。

好吧，我需要获得他们选择的日期的日、月和年。 如何获取日期表单 jQuery UI？

Answer 1

使用

var jsDate = $('#your_datepicker_id').datepicker('getDate');
if (jsDate !== null) { // if any date selected in datepicker
    jsDate instanceof Date; // -> true
    jsDate.getDate();
    jsDate.getMonth();
    jsDate.getFullYear();
}

Answer 2

您可以使用 getDate 函数检索日期：

$("#datepicker").datepicker( 'getDate' );

该值作为 JavaScript 日期对象返回。

如果要在用户选择日期时使用此值，可以使用 onSelect 事件：

$("#datepicker").datepicker({
   onSelect: function(dateText, inst) { 
      var dateAsString = dateText; //the first parameter of this function
      var dateAsObject = $(this).datepicker( 'getDate' ); //the getDate method
   }
});

在这种情况下，第一个参数是所选日期作为字符串。 使用 parseDate 将其转换为 JS 日期对象。

有关完整的 jQuery UI DatePicker 参考，请参阅http://docs.jquery.com/UI/Datepicker 。

Answer 3

试试这个，就像魅力一样，给出你选择的日期。 onsubmit 表单尝试获取此值：-

var date = $("#scheduleDate").datepicker({ dateFormat: 'dd,MM,yyyy' }).val();

参考这里

Answer 4

getdate 的链接： https : //api.jqueryui.com/datepicker/#method-getDate

$("#datepicker").datepicker( 'getDate' );

Answer 5

有时会遇到很多麻烦。 在 datapicker 数据的属性值为 28-06-2014，但 datepicker 是 show 或 today 或没有。 我是这样决定的：

<input type="text" class="form-control datepicker" data-value="<?= date('d-m-Y', (!$event->date ? time() : $event->date)) ?>" value="<?= date('d-m-Y', (!$event->date ? time() : $event->date)) ?>" />

我添加到 datapicker 属性数据值的输入，因为如果调用jQuery(this).val() OR jQuery(this).attr('value') - 没有任何效果。 我决定循环初始化每个数据选择器并从属性数据值中获取其值：

 $("form .datepicker").each(function() {
        var time = jQuery(this).data('value');
        time = time.split('-');
        $(this).datepicker('setDate', new Date(time[2], time[1], time[0], 0, 0, 0));
    });

它工作正常 =)

Answer 6

NamingException 的答案对我有用。 除了我用

var date = $("#date").dtpicker({ dateFormat: 'dd,MM,yyyy' }).val()

datepicker没有工作，但dtpicker做到了。

Answer 7

我只是做了一些网页抓取来发现 JequeryUI datepicker 的行为，这对我来说是必要的，因为我不熟悉 JS 对象，所以：

var month = $(".ui-datepicker-current-day").attr("data-month");
var year = $(".ui-datepicker-current-day").attr("data-year");
var day = $(".ui-state-active").text();

它只是选择与类更改相关的值，因此您可以实现 onchange 事件：

$(document).on('change', '#datepicker', function() { 
    var month = $(".ui-datepicker-current-day").attr("data-month");
    var year = $(".ui-datepicker-current-day").attr("data-year");
    var day= $(".ui-state-active").text();
   $("#chosenday").text( day + " " + month  + " " + year )  ;
                        
});

或检查是否选择了当前日期：

   if( $("a").hasClass("ui-state-active") ){ 
     var month = $(".ui-datepicker-current-day").attr("data-month");
     var year = $(".ui-datepicker-current-day").attr("data-year");
     var day= $(".ui-state-active").text();
     $("#chosenday").text( day + " " + month  + " " + year );
    }