Question

我要做的是，在Bootstrap Datetimepicker上选择日期后，它应该在我的输入字段上加载一个值，但我不知道该怎么做。我的JSFiddle。

这是我的datetimepicker jQuery

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

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

Answer 1

您调用了很多不需要的库。试试这个bootstrap datepicker。希望这对你有用。

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

demo

Answer 2

您需要在输入字段中应用“datetimepickerinline”类。

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

试试这个小提琴： - https://jsfiddle.net/ekm0on2a/11/

Answer 3

您需要在输入字段中添加datepicker类。

      <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 4

以下是您想要的解决方案：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'));
});

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

4 个答案: