title: Can't get the time picker to grey out the dates in the Past
body: <p>I have a JSP Page where i want the time picker to grey out the past days and only show the dates from today to furture . i have tried the endDate option but it is not working .</p>
  
  <p>Heres my jsp page</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;%@ page language="java" contentType="text/html; charset=UTF-8"
   pageEncoding="UTF-8"%&gt;
  &lt;%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%&gt;
  &lt;%@ taglib prefix="sec"
   uri="http://www.springframework.org/security/tags"%&gt;
  &lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --&gt;
  &lt;title&gt;Categories&lt;/title&gt;
  &lt;link rel="stylesheet"
   href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"&gt;
  &lt;link rel="stylesheet"
   href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"&gt;
  &lt;link rel="stylesheet" href='&lt;c:url value="/static/css/header.css" /&gt;'&gt;
  &lt;!-- &lt;script
   src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script
   src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"&gt;&lt;/script&gt;
   &lt;script type="text/javascript" src="bootstrap-datepicker.de.js" charset="UTF-8"&gt;&lt;/script&gt; --&gt;
   &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"&gt;&lt;/script&gt;
  
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  &lt;script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"&gt;&lt;/script&gt;
  
  &lt;script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"&gt;&lt;/script&gt;
  
  &lt;script src="http://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/src/js/bootstrap-datetimepicker.js"&gt;&lt;/script&gt;
  
  &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/&gt;
  
  &lt;link href="http://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/build/css/bootstrap-datetimepicker.css" rel="stylesheet"/&gt;
  
  
   
  &lt;style type="text/css"&gt;
  
  
  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;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
   &lt;jsp:include page="../shared/header.jsp"&gt;
    &lt;jsp:param value="editCategories" name="currentPage" /&gt;
   &lt;/jsp:include&gt;
   &lt;div class="row"&gt;
    &lt;div class="text-center"&gt;
     &lt;h2&gt;Select Category&lt;/h2&gt;
     &lt;div class="text-muted"&gt;
      &lt;h4&gt;Choose a Category to Edit, Update and Schedule Changes&lt;/h4&gt;
     &lt;/div&gt;
    &lt;/div&gt;
   &lt;/div&gt;
   &lt;div class="form-group" id="categorySelect"&gt;
    &lt;select class="form-control" id="categoryMenu"&gt;
       &lt;option value="" disabled selected&gt;Select Category&lt;/option&gt;
     &lt;c:forEach items="${category}" var="catitem"&gt;
       &lt;option&gt;${catitem}&lt;/option&gt;
     &lt;/c:forEach&gt;
    &lt;/select&gt;
   &lt;/div&gt;
   &lt;br&gt;&lt;/br&gt;
  
   &lt;form class="form-horizontal" role="form" action="updateCategory" method=POST id="form1"&gt;
  &lt;div class="table-responsive"&gt;
          &lt;table class="table table-bordered table-striped table-highlight"&gt;
          &lt;tr&gt;
          &lt;th style="width:15%" &gt;Property&lt;/th&gt;
          &lt;th style="width:40%"&gt;Present Value&lt;/th&gt;
          &lt;th style="width:45%"&gt;Edited Value&lt;/th&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
          &lt;td align="center"&gt;&lt;strong&gt;Id&lt;/strong&gt;&lt;/td&gt;
           &lt;td&gt;&lt;p class="text-danger" id="id1"&gt;Id&lt;/p&gt;&lt;/td&gt;
          &lt;td&gt;&lt;input type="text" class="form-control" id="id" name="id" placeholder="Enter Id" disabled&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
          &lt;td align="center"&gt;&lt;strong&gt;Cat Key&lt;/strong&gt;&lt;/td&gt;
  &lt;!--         &lt;td&gt;&lt;input type="text" class="form-control" id="catKey1" name="catKey1" placeholder="Enter CatKey" disabled&gt;&lt;/td&gt; --&gt;
         &lt;td&gt;&lt;p class="text-danger" id="catKey1"&gt;Cat Key&lt;/p&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="text" class="form-control" id="catKey" name="catKey" placeholder="Enter CatKey" disabled&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
          &lt;td align="center"&gt;&lt;strong&gt;Name&lt;/strong&gt;&lt;/td&gt;
          &lt;td&gt;&lt;p class="text-danger" id="name1"&gt;Name&lt;/p&gt;&lt;/td&gt;
          &lt;td&gt;&lt;input type="text" class="form-control" id="name" name="name" placeholder="Enter Name"&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
          &lt;td align="center"&gt;&lt;strong&gt;Icon&lt;/strong&gt;&lt;/td&gt;
           &lt;td&gt;&lt;p class="text-danger" id="icon1"&gt;Icon&lt;/p&gt;&lt;/td&gt;
          &lt;td&gt;&lt;input type="text" class="form-control" id="icon" name="icon" placeholder="Enter Icon"&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
          &lt;td align="center"&gt;&lt;strong&gt;Icon White&lt;/strong&gt;&lt;/td&gt;
          &lt;td&gt;&lt;p class="text-danger" id="iconWhite1"&gt;Icon White&lt;/p&gt;&lt;/td&gt;
           &lt;td&gt;&lt;input type="text" class="form-control" id="iconWhite" name="iconWhite" placeholder="Enter IconWhite"&gt;&lt;/td&gt;
    &lt;/tr&gt;
          &lt;tr&gt;
          &lt;td align="center"&gt;&lt;strong&gt;Color&lt;/strong&gt;&lt;/td&gt;
           &lt;td&gt;&lt;p class="text-danger" id="color1"&gt;Color&lt;/p&gt;&lt;/td&gt;
          &lt;td&gt;&lt;input type="text" class="form-control" id="color" name="color" placeholder="Enter Color"&gt;&lt;/td&gt;
    &lt;/tr&gt; 
    &lt;/table&gt;
    &lt;p align="center"&gt;&lt;strong&gt;Success Messages Of Services Catering The Category&lt;/strong&gt;&lt;/p&gt;
    &lt;table class="table table-bordered table-striped table-highlight" id="tab_logic"&gt;
      &lt;tbody&gt;
                    &lt;!--   &lt;tr id='addr1'&gt;&lt;/tr&gt; --&gt;
      &lt;/tbody&gt;
     &lt;/table&gt;
     &lt;table class="table table-bordered table-striped table-highlight" id="tab_logic"&gt;
      &lt;tbody&gt;
                    &lt;tr&gt;
                
                    &lt;td&gt; &lt;div class="checkbox" style="text-align:center"&gt;
                    &lt;label&gt;&lt;input type="checkbox" value="schedule" id="schedule" name="schedule"&gt;Schedule&lt;/label&gt;
                       &lt;/div&gt;
                     &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;
                     &lt;td align="center"&gt;&lt;div class="form-group" style="width:30%"&gt;
                     &lt;div class='input-group date' id='datetimepicker1' &gt;
                       &lt;input type='text' class="form-control" name="date" id="date"/&gt;
                       &lt;span class="input-group-addon"&gt;
                          &lt;span class="glyphicon glyphicon-calendar"&gt;&lt;/span&gt;
                        &lt;/span&gt;
                     &lt;/div&gt;
                 &lt;/div&gt;
                &lt;/td&gt;
                    &lt;/tr&gt;
      &lt;/tbody&gt;
     &lt;/table&gt;
   &lt;!--  &lt;div class="checkbox" style="text-align:center"&gt;
       &lt;label&gt;&lt;input type="checkbox" value="schedule" id="schedule"&gt;Schedule&lt;/label&gt;
       &lt;/div&gt;
        &lt;div class="form-group"  style="text-align:center;width:30%"&gt;
                  &lt;div class='input-group date' id='datetimepicker1' style="text-align:center"&gt;
                      &lt;input type='text' class="form-control" style="text-align:center"/&gt;
                      &lt;span class="input-group-addon"&gt;
                          &lt;span class="glyphicon glyphicon-calendar"&gt;&lt;/span&gt;
                      &lt;/span&gt;
                  &lt;/div&gt;
              &lt;/div&gt; --&gt;
     
   &lt;table class="table table-bordered table-striped table-highlight"&gt;
       &lt;tr&gt;
       
       &lt;td colspan="3" align="center"&gt;
    &lt;div class="form-group"&gt;
     &lt;button type="submit" class="btn btn-success btn-md" id="submit"&gt;Submit&lt;/button&gt;
    &lt;/div&gt;
    &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  &lt;/form&gt;
   &lt;script type="text/javascript"&gt;
       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("&lt;tr id=addr1&gt;&lt;/tr&gt;");
     
     for (var i =1 ; i&lt;=num ; i++)
      { 
      $('#addr'+i).html("&lt;td align='center' style='width:15%' id='pos"+i+"'&gt;&lt;strong&gt;"+ (i+1) +"&lt;/strong&gt;&lt;/td&gt;&lt;td style='width:40%'&gt;&lt;p class='text-danger' id='posm"+i+"'&gt;"+i+"&lt;/p&gt;&lt;/td&gt;&lt;td&gt;&lt;input type='text' class='form-control' id='posmi"+i+"' name='posmi"+i+"' placeholder='Enter POSM'&gt;&lt;/td&gt;");
            $('#tab_logic').append('&lt;tr id="addr'+(i+1)+'"&gt;&lt;/tr&gt;');
   
        
      }
    }
    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 &lt;=data.length ;i++) { 
        $("#pos"+i.toString()).html("&lt;strong&gt;"+data[i-1].name+"&lt;/strong&gt;");
        $("#posm"+i.toString()).html("&lt;strong&gt;"+data[i-1].message+"&lt;/strong&gt;");
        $("#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("&lt;strong&gt;"+ data.id + "&lt;/strong&gt;");
      //  $("#id").val(data.id); 
       $("#id").attr('disabled','disabled');
      // $("#catKey").val(data.catkey); 
       $("#catKey1").html("&lt;strong&gt;"+ data.catkey + "&lt;/strong&gt;");
       $("#catKey").attr('disabled','disabled');
       $("#name").val(data.name);
       $("#name1").html("&lt;strong&gt;"+ data.name + "&lt;/strong&gt;");
       $("#icon").val(data.icon);
       $("#icon1").html("&lt;strong&gt;"+ data.icon + "&lt;/strong&gt;");
       $("#iconWhite1").html("&lt;strong&gt;"+ data.icon_white + "&lt;/strong&gt;");
       $("#iconWhite").val(data.icon_white);
       $("#color1").html("&lt;strong&gt;"+ data.color+ "&lt;/strong&gt;");
       $("#color").val(data.color);
       $('#123').html(data.posmNumber);
       t=data.posmNumber;
      
      },
      error : function() {
       alert("error");
      }
  
     });
  
    }
   &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Can anyone tell me as to why this is happening .</p>