如何从jQuery UI日期选择器中获取日期

Question

我想在用户选择jQuery UI日期选择器中的日期并点击表单上的按钮时从日期选择器获取日期。

我需要获取他们选择的日期的日，月和年份。如何从jQuery UI获取日期？

- user605334

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

- CoolEsh

---

有没有一种方法可以在日期数据类型上运行任何方法？我的意思是，getDate、getMonth、getFullYear等等。 - Ajeeb.K.P

在调用日期选择器的getDate方法后，您将获得js Date()对象，然后可以使用它来调用getDate、getMonth、getFullYear等方法。 - CoolEsh

如果我们打印jsDate变量，它会给我们类似于这样的东西： Mon Aug 24 2020 00:00:00 GMT+0530 (India Standard Time)现在我们可以在jsDate上应用getDate、getMonth、getFullYear方法。 - Laveena

Answer 2

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

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

该值作为JavaScript Date对象返回。

如果您想在用户选择日期时使用此值，可以使用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日期对象。

请参阅http://docs.jquery.com/UI/Datepicker，了解完整的jQuery UI DatePicker参考信息。

- Vivek

---

最佳解决方案是因为不需要使用日期对象的全局变量。 - Rashid

Answer 3

试试这个，效果很好，会给出你选择的日期。在提交表单时尝试获取此值：

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

参考此处

- NameNotFoundException

Answer 4

获取日期的链接：https://api.jqueryui.com/datepicker/#method-getDate

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

- alexl

Answer 5

我刚刚进行了一些网络爬虫，以了解JequeryUI日期选择器的行为，这对我来说很必要，因为我不熟悉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 );
    }

- MrR0b07

Answer 6

有时它会出现很多问题。在datapicker的属性值中，日期为28-06-2014，但datepicker显示的是今天或什么都不显示。我是这样解决的：

<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的输入中添加了data-value属性，因为如果调用 jQuery(this).val() 或 jQuery(this).attr('value') - 都不起作用。我决定在每个datapicker中循环初始化并从data-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));
    });

而且它正常工作 =)

- realmag777

---

只有当你的日期格式为d-m-Y时，这才有效。如果你的日期格式为m-d-Y或任何其他格式，那么你就完了！ - Mohamed Nuur

Answer 7

NamingException的回答对我有用。除了我使用了

var date = $（“#date”）.dtpicker（{dateFormat:'dd, MM, yyyy'}）。val（） datepicker没有起作用，但dtpicker起作用了。

- evobe