DateTimePicker in MVC using JQuery-UI
<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>