0
我有一個JSP頁面，我希望時間選擇器灰化過去的日子，只顯示從今天到今天的日期。我已經嘗試了endDate選項，但它不工作。不能讓時間選擇器灰掉過去的日期
繼承人我的jsp頁面
<%@ page language="java" contentType="text/html; charset=UTF-8"
\t pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="sec"
\t 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"
\t href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet"
\t 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
\t src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script
\t src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
\t <script type="text/javascript" src="bootstrap-datepicker.de.js" charset="UTF-8"></script> -->
\t <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"/>
\t
<style type="text/css">
table {
table-layout: fixed;
word-wrap: break-word;
}
th {
text-align:center;
}
#categorySelect {
\t text-align: center;
}
#categorySelect {
\t margin: auto;
\t width: 30%;
}
#123 {
\t margin: auto;
\t width: 50%;
}
p {
\t font:bold;
}
</style>
</head>
<body>
\t <jsp:include page="../shared/header.jsp">
\t \t <jsp:param value="editCategories" name="currentPage" />
\t </jsp:include>
\t <div class="row">
\t \t <div class="text-center">
\t \t \t <h2>Select Category</h2>
\t \t \t <div class="text-muted">
\t \t \t \t <h4>Choose a Category to Edit, Update and Schedule Changes</h4>
\t \t \t </div>
\t \t </div>
\t </div>
\t <div class="form-group" id="categorySelect">
\t <select class="form-control" id="categoryMenu">
\t \t <option value="" disabled selected>Select Category</option>
\t \t \t <c:forEach items="${category}" var="catitem">
\t \t \t \t <option>${catitem}</option>
\t \t \t </c:forEach>
\t \t </select>
\t </div>
\t <br></br>
\t <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>
\t \t </tr>
\t \t <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>
\t \t <td><input type="text" class="form-control" id="catKey" name="catKey" placeholder="Enter CatKey" disabled></td>
\t \t </tr>
\t \t <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>
\t \t </tr>
\t \t <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>
\t \t </tr>
\t \t <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>
\t \t </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>
\t \t </tr>
\t \t </table>
\t \t <p align="center"><strong>Success Messages Of Services Catering The Category</strong></p>
\t \t <table class="table table-bordered table-striped table-highlight" id="tab_logic">
\t \t \t \t <tbody>
<!-- <tr id='addr1'></tr> -->
\t \t \t \t </tbody>
\t \t \t </table>
\t \t \t <table class="table table-bordered table-striped table-highlight" id="tab_logic">
\t \t \t \t <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>
\t <td align="center"><div class="form-group" style="width:30%">
\t \t \t <div class='input-group date' id='datetimepicker1' >
\t <input type='text' class="form-control" name="date" id="date"/>
\t <span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
\t \t </span>
\t \t \t </div>
\t \t \t </div>
\t \t </td>
</tr>
\t \t \t \t </tbody>
\t \t \t </table>
\t <!-- <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> -->
\t <table class="table table-bordered table-striped table-highlight">
<tr>
<td colspan="3" align="center">
\t \t <div class="form-group">
\t \t \t <button type="submit" class="btn btn-success btn-md" id="submit">Submit</button>
\t \t </div>
\t \t </td>
\t \t </tr>
</table>
</div>
</form>
\t <script type="text/javascript">
\t var t;
\t \t $(function() {
\t \t \t
\t \t \t jQuery.validator.addMethod("validHex", function(value, element) {
\t \t \t \t //return str.match(/^#[a-f0-9]{6}$/i) !== null;
\t \t \t \t if (value.match(/^#[a-f0-9]{6}$/i) !== null)
\t \t \t \t \t return true
\t \t \t \t else
\t \t \t \t return false;
\t \t \t \t
\t \t \t });
\t \t \t
\t \t \t $('#form1').validate({
\t \t \t \t rules: {
\t \t \t icon: {
\t \t \t required: true,
\t \t \t url:true
\t \t \t },
\t \t \t \t \t color : {
\t \t \t \t \t \t required:true,
\t \t \t \t \t \t validHex: true
\t \t \t \t \t }
\t \t \t },
\t \t \t messages: {
\t \t \t \t icon:{
\t \t \t \t \t required: "Can't be empty."
\t \t \t \t },
\t \t \t \t color:{
\t \t \t \t \t required: "Can't be empty.",
\t \t \t \t \t validHex: " Enter valid hex color"
\t \t \t \t }
\t \t \t
\t \t \t }
\t \t \t });
\t \t \t
\t \t \t var date = new Date();
\t \t var d = new Date();
\t \t d.setDate(date.getDate());
\t \t \t $("#datetimepicker1").datetimepicker({
\t \t \t \t defaultDate: new Date(),
\t \t \t \t format:'YYYY-MM-DD HH:mm',
\t \t \t endDate: d,
\t \t \t });
\t \t \t
\t \t \t $("#categoryMenu").change(function() {
\t \t \t \t var category = $("#categoryMenu").val(); \t
\t \t \t \t loadData(category);
\t \t \t \t loadPosm(t);
\t \t \t \t var y = $("#id1").text();
\t \t \t \t loadPosmData(y);
\t \t \t });
\t
\t \t });
\t \t
\t \t
\t \t function loadPosm(num) {
\t \t \t $('#tab_logic').html("<tr id=addr1></tr>");
\t \t \t
\t \t \t for (var i =1 ; i<=num ; i++)
\t \t \t \t { \t
\t \t \t \t $('#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>");
\t \t $('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
\t
\t \t \t \t
\t \t \t \t }
\t \t }
\t \t function loadPosmData(category_id) {
\t \t \t $.ajax({
\t \t \t \t type : "GET",
\t \t \t \t data : {
\t \t \t \t \t catId : category_id
\t \t \t \t },
\t \t \t \t dataType : 'json',
\t \t \t \t async : false ,
\t \t \t \t url : "printPosmDetails",
\t \t \t \t success : function(data) {
\t \t \t
\t \t \t \t \t for(var i=1 ;i <=data.length ;i++) { \t
\t \t \t \t \t \t $("#pos"+i.toString()).html("<strong>"+data[i-1].name+"</strong>");
\t \t \t \t \t \t $("#posm"+i.toString()).html("<strong>"+data[i-1].message+"</strong>");
\t \t \t \t \t \t $("#posmi"+i.toString()).val(data[i-1].message);
\t \t \t \t \t }
\t \t \t \t },
\t \t \t \t error : function() {
\t \t \t \t \t alert("error");
\t \t \t \t }
\t \t \t });
\t \t \t
\t \t }
\t \t function loadData(category) {
\t \t \t $.ajax({
\t \t \t \t type : "GET",
\t \t \t \t data : {
\t \t \t \t \t categor : category
\t \t \t \t },
\t \t \t \t dataType : 'json',
\t \t \t \t async : false ,
\t \t \t \t url : "printCategoryDetails",
\t \t \t \t success : function(data) {
\t \t \t \t \t $("#id1").html("<strong>"+ data.id + "</strong>");
\t \t \t \t // \t $("#id").val(data.id);
\t \t \t \t \t $("#id").attr('disabled','disabled');
\t \t \t \t // \t $("#catKey").val(data.catkey);
\t \t \t \t \t $("#catKey1").html("<strong>"+ data.catkey + "</strong>");
\t \t \t \t \t $("#catKey").attr('disabled','disabled');
\t \t \t \t \t $("#name").val(data.name);
\t \t \t \t \t $("#name1").html("<strong>"+ data.name + "</strong>");
\t \t \t \t \t $("#icon").val(data.icon);
\t \t \t \t \t $("#icon1").html("<strong>"+ data.icon + "</strong>");
\t \t \t \t \t $("#iconWhite1").html("<strong>"+ data.icon_white + "</strong>");
\t \t \t \t \t $("#iconWhite").val(data.icon_white);
\t \t \t \t \t $("#color1").html("<strong>"+ data.color+ "</strong>");
\t \t \t \t \t $("#color").val(data.color);
\t \t \t \t \t $('#123').html(data.posmNumber);
\t \t \t \t \t t=data.posmNumber;
\t \t \t \t
\t \t \t \t },
\t \t \t \t error : function() {
\t \t \t \t \t alert("error");
\t \t \t \t }
\t \t \t });
\t \t }
\t </script>
</body>
</html>誰能告訴我，爲什麼發生這種情況。
我試過了，但沒有工作 –
只用'minDate：0'選項設置一次，刪除所有其他選項。 –