标签: bootstrap-datetimepicker
DatePicker编辑器模板
下面是一个EditorTemplate,它使用EditorFor帮助器呈现Bootstrap datetimepicker,我看到的问题是脚本部分.它适用于DateTimePicker每个视图一个- 但由于我使用类选择器,每当我DateTimePicker在每个视图中使用2个或更多时,它会呈现重复的<script>部分,使DOM在TextBox调用日历时感到困惑.我在这里错过了什么？
@model DateTime?
<div class='input-group date datePicker'>
<span class="input-group-sm">
@Html.TextBox("", Model.HasValue ? Model.Value.ToString("d") : String.Empty)
</span>
</div>
<script type="text/javascript">
$(function() {
$('.datePicker').datetimepicker({
pickTime: false
});
});
</script>
asp.net-mvc mvc-editor-templates asp.net-mvc-4 bootstrap-datetimepicker
推荐指数
解决办法
查看次数
使用Angular js的自定义时间选择器
我需要使用角度javascript自定义时间选择器
我在正常下拉框中尝试了时间,这看起来不太好,因为用户必须选择3个下拉菜单1)小时2)分钟3)Meridian
<select type="text" ng-model="hours">
<option value="00">00</option>
<option value="01">01</option>
</select>
<select type="text" ng-model="minutes">
<option value="00">00</option>
<option value="10">10</option>
</select>
<select type="text" ng-model="meridian">
<option value="AM">AM</option>
<option value="PM">PM</option>
</select>
而不是三个字段,我打算添加一个时间选择器
datetimepicker timepicker angularjs-directive bootstrap-datetimepicker
推荐指数
解决办法
查看次数
Bootstrap DateTimePicker:一次打开一个datetimepicker
我有一个带有多个datetimepickers的html模板.如果我单击按钮打开一个datetimepicker,然后单击另一个以打开新的,则第一个保持不变(它不会关闭).我希望一次只能打开一个datetimepicker.
这是一个JsFiddle演示
$('#datetimepicker1, #datetimepicker2').datetimepicker();
这是bootstrap datetimepicker 2.5的标准行为,当时处理时刻2.5(与langs一起),但现在似乎没有像那样工作.
有没有人有任何想法来解决这个问题？
注意:我正在使用Eonasdan bootstrap-datetimepicker版本3.0.3,时刻2.8(与语言环境一起使用),jQuery 1.9和Bootstrap 3
这里很棘手的是bootstrap-datetimepicker 为每个初始化的datetimepicker追加到<body>一个<div>与其触发按钮完全无关的.
javascript jquery datetimepicker twitter-bootstrap bootstrap-datetimepicker
推荐指数
解决办法
查看次数
如何设置时间选择器只设置bootstrap-datetimepicker.js上午8:30到晚上8:30的时间？
HTML代码:
<div class="form-group">
<label class="col-md-3 control-label" for="event_date">Start at</label>
<div class="col-md-8">
<input id="event_start_date" name="event_start_date" type="text" placeholder="" class="form-control input-md event_date" required="">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" for="event_date">End at</label>
<div class="col-md-8">
<input id="event_end_date" name="event_end_date" type="text" placeholder="" class="form-control input-md event_date" required="">
</div>
</div>`
JavaScript代码:
$('#event_start_date').datetimepicker({
minTime: "08:30:00"
});
我需要设置时间戳开始时间为上午8:30到结束时间为晚上8:30禁用其他时间选择器.怎么可以帮忙？
jquery timepicker twitter-bootstrap bootstrap-datetimepicker
推荐指数
解决办法
查看次数
Bootstrap Datetimepicker更改事件未触发
Bootstrap Datetimepicker更改事件不会正确触发。有什么线索吗？
https://github.com/Eonasdan/bootstrap-datetimepicker/blob/master/docs/Events.md
$('#datetimepickerStart').datetimepicker();
$('#datetimepickerStart').datetimepicker().on('change', function (ev) {
alert('!!!');
});
推荐指数
解决办法
查看次数
未捕获的ReferenceError:在mvc中加载引导日期时间选择器时未定义$
当我添加引导日期时间选择器时,单击"glyphicon glyphicon-calendar"时没有加载日历,添加了所有文件,但它显示错误:
未捕获的ReferenceError:$未定义为1:417
查看页面:
<script src="~/Scripts/ckeditor/ckeditor.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<link href="http://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" rel="stylesheet">
<div class="form-group">
@Html.LabelFor(model => model.Date, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
</div>
</div>
@Html.ValidationMessageFor(model => model.Date, "", new { @class = "text-danger" })
</div>
</div>
BundleConfig.cs
bundles.Add(new StyleBundle("~/css/bootstrap").Include(
"~/assets/css/bootstrap.min.css"
));
bundles.Add(new ScriptBundle("~/bundles/jquery").Include( …javascript asp.net-mvc jquery asp.net-mvc-4 bootstrap-datetimepicker
推荐指数
解决办法
查看次数
Bootstrap DatetimePicker 禁用一周中的特定日期（星期日 - 星期三）
我使用 Bootstrap DateTimePicker 来显示日历，我想从日历中删除一些天（禁用它们）
$(function () {
$('#datetimepicker1').datetimepicker({
inline: true,
format: "dd MM yyyy",
defaultDate: null,
disabledDates: function (date) {
var day = date.getDay();
return [(day != 1 && day != 2)];
}
})
}).on('dp.change', function (e, selectedDate, $td) {
//var time = e.date.format("HH:mm:ss");
//alert(e.date + ' - ' + time);
$('.input-field1').val(e.date.format("DD/MM/YYYY"));
if (check) {
$('.FormDownDateSelect').slideToggle("fast", function () { });
}
});
我尝试了上面的代码，特别是禁用日期部分，但它不起作用。有人可以告诉我如何禁用一周中的某些天。周日至周三。
推荐指数
解决办法
查看次数
如何限制用户使用 datetimepicker 输入数据并禁用手动用户输入？
我想限制用户只能使用 datetimepicker 输入数据。下面是我正在使用的代码：
<div class="form-group">
<label>Start</label>
<div class="input-group date" id="dtp1">
<input type="text" id="txtStart" class="form-control" readonly="readonly"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
$('#dtp1').datetimepicker({
format: 'DD/MM/YYYY HH:mm A',
daysOfWeekDisabled: [0, 6]
});
我曾尝试使用 readonly 属性，但这会同时禁用输入和日期时间选择器。有什么方法可以禁用输入字段但仍允许用户单击日历图标来选择日期？
javascript jquery bootstrap-datetimepicker eonasdan-datetimepicker
推荐指数
解决办法
查看次数
检查 Bootstrap4 datetimepicker 的下拉菜单？
我正在尝试检查此日期时间选择器的下拉菜单中的元素。但是，每当我单击任意位置时，即使强制处于焦点状态，下拉菜单也会关闭。
我使用的是 Mac 并使用 Chrome。
在此先感谢您的帮助！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tempus Dominus</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/github.min.css" />
<link rel="stylesheet" href="https://tempusdominus.github.io/bootstrap-4/theme/css/tempusdominus-bootstrap-4.css" />
<style>
</style>
</head>
<body>
<script src="https://momentjs.com/downloads/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.0-alpha14/js/tempusdominus-bootstrap-4.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-6">
<input type="text" class="form-control datetimepicker-input" id="datetimepicker5" data-toggle="datetimepicker" data-target="#datetimepicker5" />
</div>
<script type="text/javascript">
$(function() {
$('#datetimepicker5').datetimepicker();
});
</script>
</div>
</div>
</body> …datetimepicker bootstrap-datetimepicker bootstrap-4 tempus-dominus-datetimepicker
推荐指数
解决办法
查看次数
datetimepicker 不适用于 bootstrap 4？
<script>
$(function(){
$('#dob').datetimepicker();
});
</script><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" integrity="sha256-yMjaV542P+q1RnH6XByCPDfUFhmOafWbeLPmqKh11zo=" crossorigin="anonymous" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js" integrity="sha256-4iQZ6BVL4qNKlQ27TExEhBN1HFPvAvAMbFavKKosSWQ=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js" integrity="sha256-5YmaxAwMjIpMrVlK84Y/+NjCpKnFYa8bWWBbUHSBGfU=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.js" integrity="sha256-2JRzNxMJiS0aHOJjG+liqsEOuBb6++9cY4dSOyiijX4=" crossorigin="anonymous"></script>
<div class="col-md-6">
<div class="form-group">
<div class="input-group" id="dob">
<input type="text" class="form-control" placeholder="Date Of Birth">
<div class="input-group-append">
<span class="input-group-text"><i class="far fa-calendar-alt"></i></span>
</div>
</div>
</div>推荐指数
解决办法
查看次数