将 bootstrap 日期时间选择器中的选定日期插入输入字段

Question

您好，感谢您阅读本文。

我有我的 DateTimePicker：

<div class="col-lg-12 FormDownDateSelect" style="height: 100%; background-color: #EDEADE ">
    <div id="datetimepicker1"></div>
</div>

当我 select 一个日期时，我想将 selected 日期添加到这个输入字段中

<input readonly="readonly" class="input-field2" value="Vælg Dato"><span class="fa fa-arrow-down"></span>

我试过这样的东西：

$(function () {
        $('#datetimepicker1').datetimepicker({
            inline: true,
            format: "dd MM yyyy",

        }).bind('dateSelected', function (e, selectedDate, $td) {
            alert(selectedDate);
        });
    });

我什至无法让它提醒 selected 日期。有人可以帮忙吗？

Plugin

Jsfiddle

Answer 1

已修改

$(function () {
    $('#datetimepicker1').datetimepicker({
        inline: true,
        format: "dd MM yyyy",

    }).on("dp.change", function (e) {
        $('.input-field2').val(e.date);
    });
});

JS Fiddle

Answer 2

确保这些 scripts/css 已按顺序排列

您可以找到 datetimepicker CDN here
你可以找到 Moment CDN here
您可以找到 boostrap CDN here

Moment.js（如果您使用时间）需要先加载，然后是 CSS 文件，然后是 bootstrap.js，然后是 bootstrap.datetimepicker.js

就您没有从日期选择器中获取值而言，那是 b/c 您没有为 datetimepicker 插件使用正确的事件 .

您需要使用 dp.change 而不是 dateSelected。这是获得时间（以及活动）的好方法post。

这里也有一份 fiddle 给你

Answer 3

在将事件绑定到您的 datepicker 时使用 dp.change，然后您可以使用 moment.js 获取格式化日期，如下所示：

DEMO, Docs

$(function () {
        $('#datetimepicker1').datetimepicker({
            inline: true,
            format: "dd MM yyyy",

        }).bind('dp.change', function (e, selectedDate, $td) {
            $('.input-field2').val(moment(e.date._d).format("dd MM YYYY"))
        });
});

将 bootstrap 日期时间选择器中的选定日期插入输入字段

Insert Selected date from bootstrap datetime picker into input field

asp.net-mvc

jquery

datetimepicker