如何使用日期选择器将明天的日期设置为默认日期?
How to set tomorrow's date as default using date picker?
我正在做一个酒店预订项目,其中我需要提供两个输入字段作为到达日期和离开日期,在到达日期我默认显示今天的日期,用户可以点击并更改 date.So 到达日期对我来说没有问题。但问题在于出发日期,我为出发日期所做的同样的事情但它不起作用并且出发日期内没有任何显示。我需要在此处进行哪些更改。
代码如下,
$(document).ready(function() {
var date = new Date();
var today = new Date(date.getFullYear(), date.getMonth(), date.getDate());
var tomorrow = new Date(date.getFullYear(), date.getMonth(), date.getDate());
var end = new Date(date.getFullYear(), date.getMonth(), date.getDate());
$('#datepicker1').datepicker({
format: "mm/dd/yyyy",
todayHighlight: true,
startDate: today,
endDate: end,
autoclose: true
});
$('#datepicker2').datepicker({
format: "mm/dd/yyyy",
todayHighlight: true,
startDate: tomorrow,
endDate: end,
autoclose: true,
minDate : "+1"
});
});
$('#datepicker1').datepicker('setDate', '0');
$('#datepicker2').datepicker('setDate', '1');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.1/js/bootstrap-datepicker.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.1/css/bootstrap-datepicker.min.css" />
<input id="datepicker1" type="text">
<input id="datepicker2" type="text">
而且我还需要隐藏以前的日期,即我只需要设置从今天开始的活动日期,到昨天为止的所有其他日期都需要处于非活动状态。
请给我这两个解决方案来解决我的问题。
给你解决方案https://jsfiddle.net/7wdw0fr6/1/
$(document).ready(function() {
var date = new Date();
var today = new Date(date.getFullYear(), date.getMonth(), date.getDate());
var tomorrow = new Date(date.getFullYear(), date.getMonth(), (date.getDate() + 1));
var end = new Date(date.getFullYear(), date.getMonth(), (date.getDate() + 1));
$('#datepicker1').datepicker({
format: "mm/dd/yyyy",
todayHighlight: true,
startDate: today,
endDate: end,
autoclose: true
});
$('#datepicker2').datepicker({
format: "mm/dd/yyyy",
startDate: tomorrow,
endDate: end,
autoclose: true
});
$('#datepicker1').datepicker('setDate', '0');
var datepicker2 = (date.getMonth() + 1) + '/' + (date.getDate() + 1) + '/' + date.getFullYear();
$('#datepicker2').datepicker('setDate', datepicker2);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.1/js/bootstrap-datepicker.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.1/css/bootstrap-datepicker.min.css" />
<input id="datepicker1" type="text"/>
<input id="datepicker2" type="text"/ >
错误
$('#datepicker1').datepicker('setDate', '1');
应该是
$('#datepicker2').datepicker('setDate', '1');
我正在做一个酒店预订项目,其中我需要提供两个输入字段作为到达日期和离开日期,在到达日期我默认显示今天的日期,用户可以点击并更改 date.So 到达日期对我来说没有问题。但问题在于出发日期,我为出发日期所做的同样的事情但它不起作用并且出发日期内没有任何显示。我需要在此处进行哪些更改。
代码如下,
$(document).ready(function() {
var date = new Date();
var today = new Date(date.getFullYear(), date.getMonth(), date.getDate());
var tomorrow = new Date(date.getFullYear(), date.getMonth(), date.getDate());
var end = new Date(date.getFullYear(), date.getMonth(), date.getDate());
$('#datepicker1').datepicker({
format: "mm/dd/yyyy",
todayHighlight: true,
startDate: today,
endDate: end,
autoclose: true
});
$('#datepicker2').datepicker({
format: "mm/dd/yyyy",
todayHighlight: true,
startDate: tomorrow,
endDate: end,
autoclose: true,
minDate : "+1"
});
});
$('#datepicker1').datepicker('setDate', '0');
$('#datepicker2').datepicker('setDate', '1');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.1/js/bootstrap-datepicker.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.1/css/bootstrap-datepicker.min.css" />
<input id="datepicker1" type="text">
<input id="datepicker2" type="text">
而且我还需要隐藏以前的日期,即我只需要设置从今天开始的活动日期,到昨天为止的所有其他日期都需要处于非活动状态。
请给我这两个解决方案来解决我的问题。
给你解决方案https://jsfiddle.net/7wdw0fr6/1/
$(document).ready(function() {
var date = new Date();
var today = new Date(date.getFullYear(), date.getMonth(), date.getDate());
var tomorrow = new Date(date.getFullYear(), date.getMonth(), (date.getDate() + 1));
var end = new Date(date.getFullYear(), date.getMonth(), (date.getDate() + 1));
$('#datepicker1').datepicker({
format: "mm/dd/yyyy",
todayHighlight: true,
startDate: today,
endDate: end,
autoclose: true
});
$('#datepicker2').datepicker({
format: "mm/dd/yyyy",
startDate: tomorrow,
endDate: end,
autoclose: true
});
$('#datepicker1').datepicker('setDate', '0');
var datepicker2 = (date.getMonth() + 1) + '/' + (date.getDate() + 1) + '/' + date.getFullYear();
$('#datepicker2').datepicker('setDate', datepicker2);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.1/js/bootstrap-datepicker.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.1/css/bootstrap-datepicker.min.css" />
<input id="datepicker1" type="text"/>
<input id="datepicker2" type="text"/ >
错误 $('#datepicker1').datepicker('setDate', '1');
应该是 $('#datepicker2').datepicker('setDate', '1');