<html lang="es">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Solicitud De Vacaciones</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://formden.com/static/cdn/bootstrap-iso.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://formden.com/static/cdn/font-awesome/4.4.0/css/font-awesome.min.css" />
<style>
.bootstrap-iso .formden_header h2, .bootstrap-iso .formden_header p, .bootstrap-iso
form{
font-family: Arial, Helvetica, sans-serif; color: black
}
.bootstrap-iso form button, .bootstrap-iso form button:hover{
color: white !important;
}
.asteriskField{
color: red;
}
</style>
</head>
<body>
<div class="bootstrap-iso">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-2 col-xs-12">
<form action="MovimientoBancario" class="form-horizontal" method="post">
<div class="form-group ">
<label class="control-label col-sm-2 requiredField" for="date">
Desde
<span class="asteriskField">
*
</span>
</label>
<div class="col-sm-10">
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-calendar">
</i>
</div>
<input class="form-control" id="date" name="from" placeholder="YYYY/MM/DD" type="text" required/>
</div>
</div>
</div>
<div class="form-group ">
<label class="control-label col-sm-2 requiredField" for="date">
Hasta
<span class="asteriskField">
*
</span>
</label>
<div class="col-sm-10">
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-calendar">
</i>
</div>
<input class="form-control" id="date" name="to" placeholder="YYYY/MM/DD" type="text" required/>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<input name="_honey" style="display:none" type="text"/>
<button class="btn btn-primary " name="submit" type="submit">
Buscar
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- Include Date Range Picker -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
<script>
$(document).ready(function(){
var date_input=$('input[id="date"]');
var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
date_input.datepicker({
format: 'yyyy-mm-dd',
container: container,
todayHighlight: true,
autoclose: true,
})
})
</script>
</body>
这是我的代码，我已经在stackoverflow上进行了搜索，但是我发现的解决方案都不适合我，我需要做两件事。
- 日期二必须大于日期
- 日期必须为您提供从当前日期开始的选择。
我尝试了这些根据第一个日期字段中选定的日期，jQuery datepicker限制了第二个日期字段的日期https://jqueryui.com/datepicker/#min-max
您可以使用startdate限制从当前日期开始。
尝试以下代码我希望它可以解决您的问题。
<html lang="es">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Solicitud De Vacaciones</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://formden.com/static/cdn/bootstrap-iso.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://formden.com/static/cdn/font-awesome/4.4.0/css/font-awesome.min.css" />
<style>
.bootstrap-iso .formden_header h2,
.bootstrap-iso .formden_header p,
.bootstrap-iso form {
font-family: Arial, Helvetica, sans-serif;
color: black
}
.bootstrap-iso form button,
.bootstrap-iso form button:hover {
color: white !important;
}
.asteriskField {
color: red;
}
</style>
</head>
<body>
<div class="bootstrap-iso">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-2 col-xs-12">
<form action="MovimientoBancario" class="form-horizontal" method="post">
<div class="form-group ">
<label class="control-label col-sm-2 requiredField" for="date">
Desde
<span class="asteriskField">
*
</span>
</label>
<div class="col-sm-10">
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-calendar">
</i>
</div>
<input class="form-control" class="from_date" id="dpd1" name="from" placeholder="YYYY/MM/DD" type="text" required/>
</div>
</div>
</div>
<div class="form-group ">
<label class="control-label col-sm-2 requiredField" for="date">
Hasta
<span class="asteriskField">
*
</span>
</label>
<div class="col-sm-10">
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-calendar">
</i>
</div>
<input class="form-control" id="dpd2" name="to" placeholder="YYYY/MM/DD" type="text" required/>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<input name="_honey" style="display:none" type="text" />
<button class="btn btn-primary " name="submit" type="submit">
Buscar
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- Include Date Range Picker -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css" />
<script>
$(document).ready(function() {
var date_input = $('input[id="date"]');
var container = $('.bootstrap-iso form').length > 0 ? $('.bootstrap-iso form').parent() : "body";
var currDate = new Date();
var date = new Date();
date.setDate(date.getDate());
$('#dpd1').datepicker({
format: 'yyyy-mm-dd',
startDate: date,
container: container,
todayHighlight: true,
autoclose: true,
})
$('#dpd1').datepicker().on('changeDate', function() {
$('#dpd2').val('')
})
$('#dpd2')
.datepicker()
.on('show', function(ev) {
var toDate = $('#dpd1').datepicker("getDate");
toDate.setDate(toDate.getDate() + 1);
$('#dpd2').datepicker("setStartDate", toDate);
})
.on('changeDate', function(ev) {
var date1 = $('#dpd1').datepicker("getDate").valueOf();
var date11 = $('#dpd1').datepicker("getDate");
date11.setDate(date11.getDate() + 1);
var date2 = ev.date.valueOf();
if (date2 <= date1) {
alert("Second date bigger than first!");
$('#dpd2').datepicker("setDate", date11);
}
});
})
</script>
</body>
demo
我注意到您在两个具有不同name属性的文本框上都使用了相同的id。最好将不同的ID用于所有控件。
无论如何，这是您在jQuery中需要做出的更改
$(document).ready(function() {
var date_input = $('input[name="from"]');
var date1_input = $('input[name="to"]');
var container =
$(".bootstrap-iso form").length > 0
? $(".bootstrap-iso form").parent()
: "body";
date_input
.datepicker({
format: "yyyy-mm-dd",
container: container,
todayHighlight: true,
autoclose: true,
startDate: new Date()
})
.on("changeDate", function(e) {
var desdeDate = e.date;
desdeDate.setDate(desdeDate.getDate() + 1);
date1_input.datepicker({
format: "yyyy-mm-dd",
autoclose: true
});
date1_input.datepicker("setStartDate", desdeDate);
date1_input.focus();
});
});
请注意，我使用名称属性选择文本框，而changeDate事件是计算第二个文本框的新开始日期值，然后使用datePicker插件的setStartDate进行初始化。
您可以在他们的网站上找到许多其他选择。