52

使用 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

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

4

13 回答 13

70

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

$("#inputWithDatePicer").data('datepicker').getFormattedDate('yyyy-mm-dd');
于 2014-09-24T19:17:24.040 回答
51

你可以试试这个

$('#startdate').val()

或者

$('#startdate').data('date')
于 2013-05-22T01:04:08.267 回答
36

引导日期选择器（引导日期选择器搜索的第一个结果）具有获取所选日期的方法。
https://bootstrap-datepicker.readthedocs.io/en/latest/methods.html#getdate

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

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

或者

$('.datepicker').datepicker("getDate").valueOf()
于 2014-11-11T11:08:28.537 回答
10

通常来说，一般来说，

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

最好是因为

$('#startdate').val()

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

于 2013-07-12T18:36:21.773 回答
3

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

$('#startdate').data('datepicker').date
于 2014-05-23T01:12:54.357 回答
3

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

$('#your-datepicker').data().datepicker.viewDate
于 2018-04-03T10:06:56.587 回答
2

像这里一样使用 HTML 试试这个：

var myDate = window.document.getElementById("startdate").value;
于 2015-03-19T11:44:38.890 回答
2

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

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

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

于 2019-10-01T14:04:18.630 回答
2

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

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

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

于 2017-01-11T12:51:34.337 回答
1 
$("#startdate").data().datepicker.getFormattedDate('yyyy-mm-dd');
于 2020-05-31T10:48:44.000 回答
0

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

于 2017-01-03T11:23:21.997 回答
0

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

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

版本：4.17.45

bootstrap-datetimejs https://github.com/Eonasdan/bootstrap-datetimepicker 版权所有 (c) 2015 Jonathan Peterson

JavaScript

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

输出看起来像：12.09.2018 03:05

于 2018-09-11T07:09:44.710 回答
0

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

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

或者

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

或者

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

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

但是有一个记录的方法来做到这一点：

这里有一个格式化功能，可以分别配置日期“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') 根据自己的喜好进行格式化

于 2021-06-09T05:21:47.290 回答