title: DateTimePicker in MVC using JQuery-UI
body: <p>In my mvc application, I need a datetimepicker. I got a code for this from <a href="http://trentrichardson.com/examples/timepicker/#slider_examples" rel="nofollow noreferrer">Here</a>.</p>
  
  <p>So first i refer these js and css files.</p>
  
  <pre><code>    &lt;script src="~/Scripts/jquery-1.9.0.min.js"&gt;&lt;/script&gt;
          &lt;script src="~/Scripts/jquery-ui.min.js"&gt;&lt;/script&gt;
          &lt;script src="~/Scripts/jquery-ui-timepicker-addon.js"&gt;&lt;/script&gt;
  &lt;link href="~/Content/jquery-ui-timepicker-addon.css" rel="stylesheet" /&gt;
  </code></pre>
  
  <p>Then, </p>
  
  <pre><code>&lt;div&gt;
  @Html.TextBox("fromdate", DateTime.Now.ToString("MM/dd/yyyy HH:mm"), new { @class = "from-date-picker", @readonly = "readonly" })
  &lt;/div&gt;
  </code></pre>
  
  <p>and in the script,</p>
  
  <pre><code>$('.from-date-picker').datetimepicker({
              dateFormat: 'mm/dd/yy',
              timeFormat: 'hh:mm',
              timeInput: true,
              stepHour: 1,
              stepMinute: 5                
          });
  </code></pre>
  
  <p>So I got a datetime picker like this.</p>
  
  <p><a href="https://i.stack.imgur.com/KgZ2Z.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KgZ2Z.jpg" alt="datetimepicker with slider"></a></p>
  
  <p>But here time is selecting by using a slider. I am trying to make it like the following type.</p>
  
  <p><a href="https://i.stack.imgur.com/GP3Qh.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GP3Qh.jpg" alt="timeselection without slider"></a></p>
  
  <p>So tried like this.</p>
  
  <pre><code>$('.from-date-picker').datetimepicker({
      controlType: 'select',
      oneLine: true,
      timeFormat: 'hh:mm tt'
  });
  </code></pre>
  
  <p>But still its coming like the old style. That is with slider. How can I change to the second type?</p>