我有一个JSP页面，我希望时间选择器在过去几天变灰，只显示从今天开始的日期。我已经尝试了endDate选项，但它无法正常工作。
继承我的jsp页面
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="sec"
uri="http://www.springframework.org/security/tags"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Categories</title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet"
href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href='<c:url value="/static/css/header.css" />'>
<!-- <script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript" src="bootstrap-datepicker.de.js" charset="UTF-8"></script> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<script src="http://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/src/js/bootstrap-datetimepicker.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/build/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<style type="text/css">
table {
table-layout: fixed;
word-wrap: break-word;
}
th {
text-align:center;
}
#categorySelect {
text-align: center;
}
#categorySelect {
margin: auto;
width: 30%;
}
#123 {
margin: auto;
width: 50%;
}
p {
font:bold;
}
</style>
</head>
<body>
<jsp:include page="../shared/header.jsp">
<jsp:param value="editCategories" name="currentPage" />
</jsp:include>
<div class="row">
<div class="text-center">
<h2>Select Category</h2>
<div class="text-muted">
<h4>Choose a Category to Edit, Update and Schedule Changes</h4>
</div>
</div>
</div>
<div class="form-group" id="categorySelect">
<select class="form-control" id="categoryMenu">
<option value="" disabled selected>Select Category</option>
<c:forEach items="${category}" var="catitem">
<option>${catitem}</option>
</c:forEach>
</select>
</div>
<br></br>
<form class="form-horizontal" role="form" action="updateCategory" method=POST id="form1">
<div class="table-responsive">
<table class="table table-bordered table-striped table-highlight">
<tr>
<th style="width:15%" >Property</th>
<th style="width:40%">Present Value</th>
<th style="width:45%">Edited Value</th>
</tr>
<tr>
<td align="center"><strong>Id</strong></td>
<td><p class="text-danger" id="id1">Id</p></td>
<td><input type="text" class="form-control" id="id" name="id" placeholder="Enter Id" disabled></td>
</tr>
<tr>
<td align="center"><strong>Cat Key</strong></td>
<!-- <td><input type="text" class="form-control" id="catKey1" name="catKey1" placeholder="Enter CatKey" disabled></td> -->
<td><p class="text-danger" id="catKey1">Cat Key</p></td>
<td><input type="text" class="form-control" id="catKey" name="catKey" placeholder="Enter CatKey" disabled></td>
</tr>
<tr>
<td align="center"><strong>Name</strong></td>
<td><p class="text-danger" id="name1">Name</p></td>
<td><input type="text" class="form-control" id="name" name="name" placeholder="Enter Name"></td>
</tr>
<tr>
<td align="center"><strong>Icon</strong></td>
<td><p class="text-danger" id="icon1">Icon</p></td>
<td><input type="text" class="form-control" id="icon" name="icon" placeholder="Enter Icon"></td>
</tr>
<tr>
<td align="center"><strong>Icon White</strong></td>
<td><p class="text-danger" id="iconWhite1">Icon White</p></td>
<td><input type="text" class="form-control" id="iconWhite" name="iconWhite" placeholder="Enter IconWhite"></td>
</tr>
<tr>
<td align="center"><strong>Color</strong></td>
<td><p class="text-danger" id="color1">Color</p></td>
<td><input type="text" class="form-control" id="color" name="color" placeholder="Enter Color"></td>
</tr>
</table>
<p align="center"><strong>Success Messages Of Services Catering The Category</strong></p>
<table class="table table-bordered table-striped table-highlight" id="tab_logic">
<tbody>
<!-- <tr id='addr1'></tr> -->
</tbody>
</table>
<table class="table table-bordered table-striped table-highlight" id="tab_logic">
<tbody>
<tr>
<td> <div class="checkbox" style="text-align:center">
<label><input type="checkbox" value="schedule" id="schedule" name="schedule">Schedule</label>
</div>
</td></tr><tr>
<td align="center"><div class="form-group" style="width:30%">
<div class='input-group date' id='datetimepicker1' >
<input type='text' class="form-control" name="date" id="date"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<!-- <div class="checkbox" style="text-align:center">
<label><input type="checkbox" value="schedule" id="schedule">Schedule</label>
</div>
<div class="form-group" style="text-align:center;width:30%">
<div class='input-group date' id='datetimepicker1' style="text-align:center">
<input type='text' class="form-control" style="text-align:center"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div> -->
<table class="table table-bordered table-striped table-highlight">
<tr>
<td colspan="3" align="center">
<div class="form-group">
<button type="submit" class="btn btn-success btn-md" id="submit">Submit</button>
</div>
</td>
</tr>
</table>
</div>
</form>
<script type="text/javascript">
var t;
$(function() {
jQuery.validator.addMethod("validHex", function(value, element) {
//return str.match(/^#[a-f0-9]{6}$/i) !== null;
if ( value.match(/^#[a-f0-9]{6}$/i) !== null)
return true
else
return false;
});
$('#form1').validate({
rules: {
icon: {
required: true,
url:true
},
color : {
required:true,
validHex: true
}
},
messages: {
icon:{
required: "Can't be empty."
},
color:{
required: "Can't be empty.",
validHex: " Enter valid hex color"
}
}
});
var date = new Date();
var d = new Date();
d.setDate(date.getDate());
$("#datetimepicker1").datetimepicker({
defaultDate: new Date(),
format:'YYYY-MM-DD HH:mm',
endDate: d,
});
$("#categoryMenu").change(function() {
var category = $("#categoryMenu").val();
loadData(category);
loadPosm(t);
var y = $("#id1").text();
loadPosmData(y);
});
});
function loadPosm(num) {
$('#tab_logic').html("<tr id=addr1></tr>");
for (var i =1 ; i<=num ; i++)
{
$('#addr'+i).html("<td align='center' style='width:15%' id='pos"+i+"'><strong>"+ (i+1) +"</strong></td><td style='width:40%'><p class='text-danger' id='posm"+i+"'>"+i+"</p></td><td><input type='text' class='form-control' id='posmi"+i+"' name='posmi"+i+"' placeholder='Enter POSM'></td>");
$('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
}
}
function loadPosmData(category_id) {
$.ajax({
type : "GET",
data : {
catId : category_id
},
dataType : 'json',
async : false ,
url : "printPosmDetails",
success : function(data) {
for(var i=1 ;i <=data.length ;i++) {
$("#pos"+i.toString()).html("<strong>"+data[i-1].name+"</strong>");
$("#posm"+i.toString()).html("<strong>"+data[i-1].message+"</strong>");
$("#posmi"+i.toString()).val(data[i-1].message);
}
},
error : function() {
alert("error");
}
});
}
function loadData(category) {
$.ajax({
type : "GET",
data : {
categor : category
},
dataType : 'json',
async : false ,
url : "printCategoryDetails",
success : function(data) {
$("#id1").html("<strong>"+ data.id + "</strong>");
// $("#id").val(data.id);
$("#id").attr('disabled','disabled');
// $("#catKey").val(data.catkey);
$("#catKey1").html("<strong>"+ data.catkey + "</strong>");
$("#catKey").attr('disabled','disabled');
$("#name").val(data.name);
$("#name1").html("<strong>"+ data.name + "</strong>");
$("#icon").val(data.icon);
$("#icon1").html("<strong>"+ data.icon + "</strong>");
$("#iconWhite1").html("<strong>"+ data.icon_white + "</strong>");
$("#iconWhite").val(data.icon_white);
$("#color1").html("<strong>"+ data.color+ "</strong>");
$("#color").val(data.color);
$('#123').html(data.posmNumber);
t=data.posmNumber;
},
error : function() {
alert("error");
}
});
}
</script>
</body>
</html>
任何人都可以告诉我为什么会这样。
答案 0 :(得分：0)
如果要禁用过去的日期，请在日期选择器初始化代码中添加team2567 = team;
season1617 = season1617;
。
minDate: 0