从 Bootstrap datetimepicker 中选择后将日期加载到输入字段
Load date to input field after selecting from Bootstrap datetimepicker
我想做的是,在选择 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});
});
我需要将它用于所有输入,或者换句话说,最接近的输入字段。
您需要在输入字段中应用 class 'datetimepickerinline'。
<input id="" placeholder="press to show calendar" class="input datetimepickerinline">
试试这个 fiddle : - https://jsfiddle.net/ekm0on2a/11/
您需要在输入字段中添加日期选择器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});
});
这是您想要的解决方案: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 日期选择器。希望这对你有用。
$(document).ready(function(){
$('#datepicker').datepicker({
format: 'dd/mm/yyyy',
autoclose: true,
todayHighlight: true,
forceParse: false,
});
});
我想做的是,在选择 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});
});
我需要将它用于所有输入,或者换句话说,最接近的输入字段。
您需要在输入字段中应用 class 'datetimepickerinline'。
<input id="" placeholder="press to show calendar" class="input datetimepickerinline">
试试这个 fiddle : - https://jsfiddle.net/ekm0on2a/11/
您需要在输入字段中添加日期选择器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});
});
这是您想要的解决方案: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 日期选择器。希望这对你有用。
$(document).ready(function(){
$('#datepicker').datepicker({
format: 'dd/mm/yyyy',
autoclose: true,
todayHighlight: true,
forceParse: false,
});
});