如何从 jQuery UI datepicker 获取日期

Posted

技术标签:

【中文标题】如何从 jQuery UI datepicker 获取日期【英文标题】:How to get the date from jQuery UI datepicker 【发布时间】:2011-06-22 15:16:00 【问题描述】:

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

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

【问题讨论】:

【参考方案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();

【讨论】:

这是在 Date 数据类型上运行任何方法的方法吗?我的意思是,getDate、getMonth、getFullYear 等? 在 datepicker 上调用 getDate 后,您将获得 js Date() 对象,然后可以使用该对象调用 getDate、getMonth、getFullYear 等 如果我们打印 jsDate 变量,那么它会给我们这样的东西 Mo​​n Aug 24 2020 00:00:00 GMT+0530 (India Standard Time) 现在我们可以应用 getDate、getMonth、getFullYear 方法jsDate.【参考方案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 参考。

【讨论】:

最佳解决方案,因为不需要日期对象的全局变量【参考方案3】:

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

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

Reference here

【讨论】:

【参考方案4】:

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

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

【讨论】:

【参考方案5】:

有时会遇到很多麻烦。在 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() 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));
    );

效果很好 =)

【讨论】:

这只有在你的日期格式是 d-m-Y 时才有效。如果你有 m-d-Y 或任何其他格式,你就完蛋了!【参考方案6】:

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

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

datepicker 不起作用,但 dtpicker 起作用。

【讨论】:

【参考方案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 );
    

【讨论】:

以上是关于如何从 jQuery UI datepicker 获取日期的主要内容,如果未能解决你的问题,请参考以下文章

jQuery UI datepicker:如何将下拉列表中的月份名称从短名称更改为长名称?

jQuery UI - Datepicker - 隐藏年份

如何触发 jQuery UI DatePicker onclick?

Jquery ui datepicker预选不是星期天的日期

JQuery UI datepicker(从星期一开始几周)

jquery datepicker超出css范围