title: JQuery datepicker: What is the use of Date:new Date ("07/19/2014")
body: <p>I am using jQuery datepicker I am not getting why to use new Date to show event in datepicker. I can show events when i pass dates manually but how to pass dates when dates are coming from database. </p>
  
  <p>For instance think that I have <code>var events =&lt;?=events?&gt;;</code> which contains <code>title</code>, <code>id</code>, <code>event_date</code>. In which <code>event_date</code> is in <code>2014-07-21</code> format which is not showing. </p>
  
  <p><a href="http://jsfiddle.net/Zrz9t/1151/" rel="nofollow">Here</a> is the example which i tried.</p>
  
  <p>I have same table with same fields. but i am fetching events from database. </p>
  
  <p>Here is the plunker link please see if you can edit and show events without using "new Date". in events array i just want {date:"2014-07-21"} in this format the event should be shown. or please tell me what i have to do to edit my database returned array to show in datepicker .Link <a href="http://jsfiddle.net/Zrz9t/1151/" rel="nofollow">plunker</a></p>
  
  <p>here is my simple html code i have included my database events object into it please see running and editing below code. i tried your code did'nt worked for me. if you uncomment working events array of object it works fine.but not working for my JSON data retuned from database. i Have to show this in JSON data. </p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;cal &lt;/title&gt;
      &lt;script type="text/javascript" src="jquery.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="jquery-ui.min.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" type="text/css" href="jquery-ui.min.css"&gt;
      &lt;style type="text/css"&gt;
      table.ui-datepicker-calendar tbody td.highlight &gt; a {
          background: url("images/ui-bg_inset-hard_55_ffeb80_1x100.png") repeat-x scroll 50% bottom #FFEB80;
          color: blue;
          background: red;
          border: 1px solid #FFDE2E;
      }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;button class="cal13"&gt;Hover me&lt;/button&gt;
      &lt;div class="cal1" style="display:none"&gt;&lt;div&gt;
  
  &lt;script type="text/javascript"&gt;
  $(document).ready(function(){
      //my original data in json format
  var events =[ 
               {"Title":"my date booked", "event_date":"2014-07-11"},
               {"Title":"my date booked", "event_date":"2014-07-12"},
              ];
  
  /* the working data
      var events = [ 
      { Title: "Five K for charity", Date: new Date("02/13/2011") }, 
      { Title: "Dinner", Date: new Date("02/25/2011") }, 
      { Title: "Meeting with manager", Date: new Date("03/01/2011") }
  ];     */       
  
  $(".cal13").mouseenter(function(){
  console.log("in now");
  $(".cal1").show();
  $(".cal1").datepicker({
      beforeShowDay: function(date) {
          var result = [true, '', null];
          var matching = $.grep(events, function(event) {
              return event.Date.valueOf() === date.valueOf();
          });
  
          if (matching.length) {
              result = [true, 'highlight', null];
          }
          return result;
      },
      onSelect: function(dateText) {
          var date,
              selectedDate = new Date(dateText),
              i = 0,
              event = null;
  
          while (i &lt; events.length &amp;&amp; !event) {
              date = events[i].Date;
  
              if (selectedDate.valueOf() === date.valueOf()) {
                  event = events[i];
              }
              i++;
          }
          if (event) {
              alert(event.Title);
          }
      }
  });
  }).mouseleave(function(){
  $(".cal1").hide();
      console.log("out now");
    });
  });
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>