使用 Bootstrap Datepicker 时如何获取选定的日期值？答案

【问题标题】：How to get the selected date value while using Bootstrap Datepicker?使用 Bootstrap Datepicker 时如何获取选定的日期值？
【发布时间】：2013-05-16 22:06:10
【问题描述】：

使用 jquery 和 Bootstrap Datepicker，如何获取我使用 Bootstrap Datepicker 选择的新日期值？仅供参考，我正在使用 Rails 3 和 Coffescript。

我使用以下方法设置数据选择器：

<input id="startdate" class="span2 datepicker" type="text" value="" name="startdate" default="2013-05-21" data-date="2013-05-21" data-behavior="datepicker">
<%= submit_tag 'Get Data using date', :id => 'get_data' %>

$(".datepicker").datepicker
      endDate: new Date
      format: "yyyy-mm-dd"
      autoclose: true
      minViewMode: 1
      todayBtn: "linked"

当用户点击旁边的“使用日期获取数据”按钮时，我将使用 jQuery 获取由 datepicker 设置的新日期值，阻止表单提交并使用该日期值运行 ajax 请求。除了获取正确的新日期值外，所有 ajax 都运行良好。我尝试了以下两种方法，但它没有给我新的日期，它只返回我最初设置的默认值。

sd1 = $('#startdate').attr('value')
console.log sd1

sd2 = $('#startdate').attr('data-date'))
console.log sd2

我现在感觉很愚蠢，但我不知道如何获取引导程序日期选择器设置的新日期值。

【问题讨论】：

标签： jquery ruby-on-rails jquery-ui twitter-bootstrap datepicker

【解决方案1】：

对于引导日期选择器，您可以使用：

$("#inputWithDatePicer").data('datepicker').getFormattedDate('yyyy-mm-dd');

【讨论】：

非常有帮助！当日期选择器有多个日期时，事件中返回的日期始终是序列中的第一个日期，而与日历上选择的日期无关。 data 对象始终具有实际点击日期。
大多数解决方案在获取日期和 Date.Parse() 时都给了我 NaN。您的解决方案也适用于 Date.Pase() 函数。谢谢！

【解决方案2】：

你可以试试这个

$('#startdate').val()

或

$('#startdate').data('date')

【讨论】：

对我来说，第一个 $('#startdate').val() 效果很好。谢谢
您能告诉我您使用的是哪个 Datepicker 组件吗？没有正式的，还有很多 3d 派对，这就是我问的原因。
这实际上是整个日期时间值，包括时间。看起来这就是被问到的内容。

【解决方案3】：

Bootstrap datepicker（bootstrap datepickcer 搜索的第一个结果）有一个方法来获取选定的日期。
https://bootstrap-datepicker.readthedocs.io/en/latest/methods.html#getdate

getDate：返回一个本地化的日期对象，表示内部选择中第一个日期选择器的日期对象。对于多日期选择器，返回选择的最新日期。

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

或

$('.datepicker').datepicker("getDate").valueOf()

【讨论】：

作者为什么不举个例子？！一直在寻找这种愚蠢的方法太久了。为什么这不是答案？！

【解决方案4】：

一般来说，

$('#startdate').data('date')

最好，因为

$('#startdate').val()

如果您有一个“内联”日期选择器，则不起作用

【讨论】：

【解决方案5】：

这适用于我的内联datepicker（和其他）

$('#startdate').data('datepicker').date

【讨论】：

【解决方案6】：

如果你不想要全文字符串格式的日期，你可以这样做：

$('#your-datepicker').data().datepicker.viewDate

【讨论】：

【解决方案7】：

如果您已经有多个日期已突出显示并且想要确定上次点击的日期，那么您需要以下内容：

$('#startdate').data('datepicker').viewDate

viewDate 返回一个 JavaScript 日期对象，因此您需要相应地处理它。

【讨论】：

【解决方案8】：

使用 HTML 试试这个：

var myDate = window.document.getElementById("startdate").value;

【讨论】：

我错误地对你投了反对票。您可以编辑您的答案，以便我更正upvote 吗？对此感到抱歉。

【解决方案9】：

我能够通过以下内容找到所选日期的 moment.js 对象：

$('#datepicker').data('DateTimePicker').date()

有关moment.js 以及如何使用 moment.js 对象格式化日期的更多信息

【讨论】：

【解决方案10】：

$("#startdate").data().datepicker.getFormattedDate('yyyy-mm-dd');

【讨论】：

虽然此代码可能会解决问题，including an explanation 关于如何以及为什么解决问题将真正有助于提高您的帖子质量，并可能导致更多的赞成票。请记住，您正在为将来的读者回答问题，而不仅仅是现在提问的人。请edit您的答案以添加解释并说明适用的限制和假设。 From Review

【解决方案11】：

我尝试了上述答案，但对我没有用；因此，正如 user3475960 所提到的，我使用了$('#startdate').html()，它给了我 html 文本，所以我根据需要使用它...... 可能有人会利用它..

【讨论】：

【解决方案12】：

这里有很多解决方案，但可能是最有效的一个。检查您要使用的脚本版本。

至少我可以给你我的 100% 工作解决方案

版本：4.17.45

bootstrap-datetimejs https://github.com/Eonasdan/bootstrap-datetimepicker 版权所有 (c) 2015 乔纳森·彼得森

JavaScript

var startdate = $('#startdate').val();

输出如下：12.09.2018 03:05

【讨论】：

【解决方案13】：

示例here 提供了使用“getFormattedDate”的示例，但没有说明如何将格式传递给此函数。这实际上很简单，就像这样作为第二个参数：

$('#date').datepicker('getFormattedDate', 'yyyy-mm-dd');

或者

$('#date').data('datepicker').getFormattedDate('yyyy-mm-dd');

或

$(this).data().datepicker.getFormattedDate('yyyy-mm-dd')

所有这些方法都没有记录。

但是有一个记录在案的方法：

here有格式化功能，可以分别配置日期“toDisplay”和“toValue”

$('.bootstrap-datepicker-js').datepicker({
    format: {
        toDisplay: function (date, format, language) {
            var d = new Date(date).toLocaleDateString('en-GB', {
                day: 'numeric',
                month: 'short',
                year: 'numeric'
            }).split(' ').join('-');
            return d;
        },
        toValue: function (date, format, language) {
            var d = new Date(date).toLocaleDateString('en-GB', {
                day: 'numeric',
                month: 'short',
                year: 'numeric'
            }).split(' ').join('-');
            return d;
        }
    },
    minViewMode: 1,
    clearBtn: true,
    autoclose: true,
    enableOnReadonly: true
});

如果您像这样声明日期选择器，您的 $('#date').datepicker('getFormattedDate') 将根据您的喜好进行格式化

【讨论】：