版本：4.17.45

Question

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

我现在感觉非常愚蠢，但我无法找到如何获取引导日期选择器设置的新日期值。

Answer 1

对于bootstrap datepicker，您可以使用：

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

Answer 2

你可以试试这个

$('#startdate').val()

或

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

Answer 3

Bootstrap datepicker（bootstrap datepickcer搜索的第一个结果）有一个获取所选日期的方法。
http://bootstrap-datepicker.readthedocs.org/en/release/methods.html#getdate

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

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

或

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

Answer 4

一般来说，

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

是最好的，因为

$('#startdate').val()

如果你有一个“inline”的日期选择器

，

不起作用

Answer 5

这适用于内联datepicker（以及其他）

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

Answer 6

如果已经突出显示了许多日期，并希望确定上次点击的日期，那么您需要以下内容：

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

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

Answer 7

请尝试使用HTML，例如：

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

Answer 8

如果您想以全文字符串格式表示日期，可以这样做：

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

Answer 9

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

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

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

Answer 10

我尝试了上面的答案，但他们并没有为我做出努力;因此，正如user3475960所述，我使用$('#startdate').html()给了我html文本，所以我在必要时使用它... 也许有人会利用它..

Answer 11

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

至少我可以为您提供100％有效的解决方案

版本：4.17.45

bootstrap-datetimejs   https://github.com/Eonasdan/bootstrap-datetimepicker版权（c）   2015乔纳森·彼得森

JavaScript

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

输出看起来像： 12.09.2018 03:05

Answer 12

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

Answer 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') 将根据您的喜好进行格式化

如何在使用Bootstrap Datepicker时获取所选日期值？

13 个答案:

版本：4.17.45