标签: bootstrap-datepicker
如果没有选择日期,如何阻止bootstrap-datepicker清除输入中的现有值？
我有一个div,用户的出生日期预先填充了php:
<div id="datepicker" class="input-group date">
<label for="dob">Date of Birth</label> <input type="text" class="form-control" id="dob" name="dob" value="<?php $date = new DateTime($this->swimmers->dob); echo $date->format('d/m/Y');?>"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>
javascript:
<script>
$('.container .input-group.date').datepicker({
startDate: "01/01/1900",
endDate: "01/01/2100",
format: "dd/mm/yyyy",
autoclose: true,
todayHighlight: true
});
</script>
Bootstrap设置正常并且工作正常,当"dob"输入获得并失去焦点而不进行日期选择时,它会清除预先填充的值.
但是,如果通过日期选择器选择了日期,然后输入获得并失去焦点,则不会发生这种情况.
如果有人点击,预先填充的价值如何保留在现场？
编辑:第一次进行日期选择时,它会清除预先填充的值,但在第二次进行日期选择之前不会插入所选日期.
更新:工作代码已更新!
javascript php datepicker twitter-bootstrap bootstrap-datepicker
推荐指数
解决办法
查看次数
如何捕获bootstrap datepicker更改事件？
现在我在用户更改日期后尝试做某事.但似乎我的ng-change被忽略了.这是我的代码示例:
<input ng-change='changedate()'
type="text"
starting-day="2"
show-button-bar="false"
show-weeks="false"
class="form-control addTicketDateInput"
datepicker-popup="dd MMM"
ng-model="startdate"
is-open="openstart"
datepicker-options="dateOptions"
ng-required="true"
close-text="Close" />
任何的想法？
推荐指数
解决办法
查看次数
在bootstrap-datepicker中将日期设置为最初为空
我在我的网站中使用bootstrap-datepicker.datepicker将用于定义搜索过滤器.我需要将datepicker输入元素的初始值设置为空,因此它不会为搜索结果引入日期过滤器.当用户单击链接到Datepicker的文本输入时,Datepicker弹出框应选择下个月的第一天.
问题:如果我要设置一个初始日期(如下所示),文本输入将填充今天的日期,这不是我想要的.但是,如果我没有设置初始日期,则datepicker将显示20世纪70年代.我该怎么办？
类似于:jQueryUI Datepicker的演示
JS代码
var now = new Date();
var nextMonth = new Date();
nextMonth.setDate(1);
nextMonth.setMonth(now.getMonth() + 1);
var prettyDate = nextMonth.getMonth() + '/' + nextMonth.getDate() + '/' + nextMonth.getFullYear();
$('#listing_filter_available').val(prettyDate);
$('#listing_filter_available').datepicker();
HTML代码
<input type="text" id="listing_filter_available" class="input-small" placeholder="Date Available" />
尝试失败
单击文本输入el时不会弹出Datepicker
$(function() {
var now = new Date();
var nextMonth = new Date();
nextMonth.setDate(1);
nextMonth.setMonth(now.getMonth() + 1);
var prettyDate = nextMonth.getMonth() + '/' + nextMonth.getDate() + '/' + nextMonth.getFullYear();
$('#listing_filter_available').val(''); // …javascript jquery datepicker twitter-bootstrap bootstrap-datepicker
推荐指数
解决办法
查看次数
Bootstrap datepicker从另一个datepicker更改minDate/startDate
我的页面中有两个日期选择器,两者都是bootstrap.条件仅是结束日期的开始日期从不高.意味着结束日期属性(minDate)必须在开始日期由datepicker更改时更改,并且在结束日期更改时更改,开始日期datepicker的日历的最小范围应根据结束日期值.
我希望你理解我的问题
$(document).ready(function(){
$("#startdate").datepicker({
todayBtn: 1,
autoclose: true,
}).on('changeDate', function (selected) {
var minDate = new Date(selected.date.valueOf());
$('#enddate').datetimepicker('setStartDate', minDate);
});
$("#enddate").datepicker();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/js/bootstrap-datepicker.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<input type="text" placehoder="Start Date" id="startdate"/>
<input type="text" placehoder="End Date" id="enddate"/>推荐指数
解决办法
查看次数
如何实现和使用eyecon的bootstrap-datepicker？
我访问了Eyecon并下载了datepicker.我有三个文件夹.'css','js'和'less'.我已经包含了bootstrap-datepicker.js和最新的jquery.js并将.css链接在头部:
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<link rel="stylesheet" type="text/css" href="../css/datepicker.css">
<link rel="stylesheet" type="text/css" href="../css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="../css/bootstrap-responsive.css">
</head>
<body>
<div class="well">
<!--What should I enter here and where/how do I call the function?-->
</div>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="../js/bootstrap.js"></script>
</body>
</html>
可以看出,我已经在使用bootstrap库,因此也包括了.
我现在的问题是:如何实现和调用日期选择器功能？
html javascript jquery twitter-bootstrap bootstrap-datepicker
推荐指数
解决办法
查看次数
Bootstrap datepicker - 如何以正确的格式将日期作为字符串？
我正在使用Bootstrap datepicker.答案可能很明显,但我无法弄清楚如何将所选日期作为指定格式的字符串.我用了:
<div id="myDate" data-date-format="yyyy-mm-dd">
<input type="text">
</div>
在我的JavaScript中:
var value = $("#myDate").datepicker("getDate");
但它返回一个日期,而不是yyyy-mm-dd格式的字符串.
推荐指数
解决办法
查看次数
突出显示bootstrap-datepicker上的某些日期
我正在使用bootstrap-datepicker检查我的网站销售的日子,我想显示或突出显示至少有一次销售的日期.我可以在JSON上传递日期,然后将它们变成Javascript的数组,但我不知道如何使日期选择器获取日期并突出显示它们.
有没有办法使用bootstrap-datepicker来实现这一目标？
推荐指数
解决办法
查看次数
jQuery ui datepicker与bootstrap datepicker发生冲突
我想用bootstrap datepicker显示两个月.在谷歌搜索后,我无法找到如何使用bootstrap datepicker显示多个月.我发现我可以使用JQuery UI显示多个月.
但问题是:在我的应用程序中,他们使用引导日期选择器.当我尝试使用JQuery UI datepicker时,Bootstrap datepicker覆盖它,我无法看到JQuery UI datepicker.
你能否建议如何将引导程序datepicker替换为JQuery UI？
我想实现这个目标:http: //jqueryui.com/datepicker/#multiple-calendars
jquery jquery-ui jquery-ui-datepicker twitter-bootstrap bootstrap-datepicker
推荐指数
解决办法
查看次数
Bootstrap datepicker:选择整周并在输入字段中输入周间隔
我目前正在使用bootstrap-datepicker(https://github.com/eternicode/bootstrap-datepicker),但希望能够在日历(星期一到星期日)中选择整周,以及显示我正在选择的输入字段.输入字段中的默认间隔应该是您当前所在的周.
我已经看到一个类似的方法使用jQuery UI来显示jsfiddle的间隔.
C
我已经尝试编辑此代码以使用bootstrap-datepicker,没有任何运气.
知道如何为bootstrap-datepicker实现这个吗？:
任何帮助都非常感谢!
推荐指数
解决办法
查看次数
添加Javascript时,如果选择了datepicker,则会删除HTML值
我有一个Bootstrap模式,您可以在其中选择日期.在后台,填充了隐藏字段,这些字段也随表单一起提交.
问题在于,当您选择datepicker元素时,它会因某些奇怪的原因(但只有Javascript填充的隐藏值)删除隐藏值.
Datepicker JS:
var date = new Date();
date.setDate(date.getDate());
$('#datepicker').datepicker({
format: "dd/mm/yyyy",
startDate: date,
autoclose: true,
});
隐藏字段填充JS:
$(function () {
$('#appointment').on("show.bs.modal", function (e) {
$("#request_id").val($(e.relatedTarget).data('request-id'));
});
});
隐藏的HTML元素:
<input type="hidden" name="request_id" id="request_id" value="">
当模态框最初弹出时,我可以看到隐藏的值字段已填充,但是当我单击datepicker它时,它被删除.为什么是这样？
html javascript datepicker twitter-bootstrap bootstrap-datepicker
推荐指数
解决办法
查看次数