从 Bootstrap datetimepicker 中选择后将日期加载到输入字段

Question

我想做的是，在选择 Bootstrap Datetimepicker, it should load a value on my input field, but I don't know how to do that. There's my JSFiddle 上的日期后。

这是我的 jQuery 日期时间选择器

$(function () {
    $('.datetimepickerinline').datetimepicker({inline: true});
});

我需要将它用于所有输入，或者换句话说，最接近的输入字段。

Answer 1

您需要在输入字段中应用 class 'datetimepickerinline'。

<input id="" placeholder="press to show calendar" class="input datetimepickerinline">

试试这个 fiddle : - https://jsfiddle.net/ekm0on2a/11/

Answer 2

您需要在输入字段中添加日期选择器class。

      <link rel="stylesheet" type="text/css" media="screen" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
       <link href="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" rel="stylesheet">

        <script type="text/javascript" src="//code.jquery.com/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
            <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
            <script src="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>

<div id="container">
<div class="my-example">
  <input id="datepicker" placeholder="press to show calendar" class="input input-datepicker">
  <div class="dropdown">
    <div class="datetimepickerinline">
    </div>
</div>
</div>

</div>

//脚本

$(function () {
    $('#datepicker').datetimepicker({inline: true});
});

Answer 3

这是您想要的解决方案：jsfiddle

$('.datetimepickerinline').on('change dp.change', function(e){
    $('input').val($(this).data('date'));
});

参见参考资料here

此外，我注意到你想使用 moment.js

你可以使用这样的东西，使用自定义格式：

$('.datetimepickerinline').on('change dp.change', function(e){
   $('input').val(moment($(this).data('date')).format('DD/MM/YYYY, h:mm'));
});

Answer 4

你调用了很多不需要的库。试试这个 bootstrap 日期选择器。希望这对你有用。

$(document).ready(function(){
$('#datepicker').datepicker({
    format: 'dd/mm/yyyy', 
    autoclose: true, 
    todayHighlight: true,
    forceParse: false,
  });
});

demo

从 Bootstrap datetimepicker 中选择后将日期加载到输入字段

Load date to input field after selecting from Bootstrap datetimepicker

javascript

jquery

eonasdan-datetimepicker