我正在使用来自 http://eonasdan.github.io/bootstrap-datetimepicker/ 的 Bootstrap 就绪日期时间选择器.
$(function () {
$('#datetimepicker3').datetimepicker({
format: 'HH:mm'
});
});
还有这个:
<div class="row">
<div class='col-sm-1'>
<button type="button" class="btn btn-secondary btn-sm">00h:10m</button>
</div>
<div class='col-sm-1'>
<button type="button" class="btn btn-secondary btn-sm">00h:15m</button>
</div>
<div class='col-sm-1'>
<button type="button" class="btn btn-secondary btn-sm">00h:20m</button>
</div>
<div class='col-sm-1'>
<button type="button" class="btn btn-secondary btn-sm">00h:30m</button>
</div>
<div class='col-sm-1'>
<button type="button" class="btn btn-secondary btn-sm">00h:45m</button>
</div>
<div class='col-sm-1'>
<button type="button" class="btn btn-secondary btn-sm">01h:00m</button>
</div>
</div>
<div class="row">
<div class='col-sm'>
<div class="form-group">
<div class='input-group date' id='datetimepicker3' style="width: 40%">
<input id="timepicker" name="timepicker" type='text' class="form-control"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
</div>
我有 6 个按钮,当我点击它的时间时,它会自动更改数据选择器中的时间。
我无法执行更新时间的功能,这是什么主意?
最佳答案
要设置为 文本值 使用 $("#datetimepicker3").find("input").val(text);
并设置为 时间值 使用$('#datetimepicker3').data("DateTimePicker").date(text);
1.按类绑定(bind)每个按钮的点击事件。我用.btn
作为例子。
2.通过$(this).text()
获取按钮文本并替换/删除h
和m
将值设置为 datetimepicker 上的 text
。
3. 使用 $("#datetimepicker3").find("input").val(text);
$(".btn").on('click', function(e) {
var text = $(this).text().replace("h","").replace("m","");
$("#datetimepicker3").find("input").val(text);
//$('#datetimepicker3').data("DateTimePicker").date(text);//select based on requirement
});
代码的工作片段:
$(function () {
$('#datetimepicker3').datetimepicker({
format: 'hh:mm'
});
});
$(".btn").on('click', function(e) {
var text = $(this).text().replace("h","").replace("m","");
//$('#datetimepicker3').data("DateTimePicker").date(text);
$("#datetimepicker3").find("input").val(text);
});
<link rel="stylesheet" type="text/css" media="screen" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href="./css/prettify-1.0.css" rel="stylesheet">
<link href="./css/base.css" rel="stylesheet">
<link href="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<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 class="row">
<div class='col-sm-1'>
<button type="button" id="button1" class="btn btn-secondary btn-sm">00h:10m</button>
</div>
<div class='col-sm-1'>
<button type="button" class="btn btn-secondary btn-sm">00h:15m</button>
</div>
<div class='col-sm-1'>
<button type="button" class="btn btn-secondary btn-sm">00h:20m</button>
</div>
<div class='col-sm-1'>
<button type="button" class="btn btn-secondary btn-sm">00h:30m</button>
</div>
<div class='col-sm-1'>
<button type="button" class="btn btn-secondary btn-sm">00h:45m</button>
</div>
<div class='col-sm-1'>
<button type="button" class="btn btn-secondary btn-sm">01h:00m</button>
</div>
</div>
<div class="row">
<div class='col-sm'>
<div class="form-group">
<div class='input-group date' id='datetimepicker3' style="width: 40%">
<input id="timepicker" name="timepicker" type='text' class="form-control"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
</div>
关于javascript - 从 datetimepicker 时间选择器中的按钮添加小时和分钟,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52260121/