DateTimePicker in MVC using jQuery-UI

Question

In my mvc application, I need a datetimepicker. I got the code for this from here .

So, first I refer to these js and css files.

<script src="~/Scripts/jquery-1.9.0.min.js"></script> <script src="~/Scripts/jquery-ui.min.js"></script> <script src="~/Scripts/jquery-ui-timepicker-addon.js"></script> <link href="~/Content/jquery-ui-timepicker-addon.css" rel="stylesheet" /> 

Then

 <div> @Html.TextBox("fromdate", DateTime.Now.ToString("MM/dd/yyyy HH:mm"), new { @class = "from-date-picker", @readonly = "readonly" }) </div> 

and in the script,

 $('.from-date-picker').datetimepicker({ dateFormat: 'mm/dd/yy', timeFormat: 'hh:mm', timeInput: true, stepHour: 1, stepMinute: 5 }); 

So, I got a datetime collector like this.

But here, the time is selected using the slider. I am trying to do it as follows.

So I tried like this.

 $('.from-date-picker').datetimepicker({ controlType: 'select', oneLine: true, timeFormat: 'hh:mm tt' }); 

But nevertheless, his approach is similar to the old style. That is, with a slider. How can I go to the second type?

Answer 1

I am creating jsfiddle with.

Everything works like a charm.

I suppose you just don't add js or CSS. Here is what I am adding:

 <script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script> <link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.1/jquery-ui-sliderAccess.js"></script> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.1/jquery-ui-timepicker-addon.css"> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.1/jquery-ui-timepicker-addon.js"></script> 

Answer 2

Finally, it works great. Work code:

  <link href="@Url.Content("~/Content/jquery-ui.css")" rel="stylesheet" type="text/css" /> <script src="@Url.Content("~/Scripts/jquery-1.10.2.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery-ui-1.11.4.min.js")" type="text/javascript"></script> <script type="text/javascript" src="~/Scripts/jquery-ui-timepicker-addon.js"></script> <link href="~/Content/jquery-ui-timepicker-addon.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="~/Scripts/jquery-ui-sliderAccess.js"></script> <div> <input type="text" value="" id="from-date-picker" /> </div> <script> $('#from-date-picker').datetimepicker({ controlType: 'select', oneLine: true, timeFormat: 'HH:mm' }); </script> 

And he gives a conclusion, for example,

Thanks to everyone.

Answer 3

Please check below link

code.runnable.com

  $(function() { $('#basic_example_1').datetimepicker({ controlType : 'select', /* * timeFormat Default: "HH:mm", A Localization Setting - String of * format tokens to be replaced with the time. */ timeFormat : "hh:mm tt", }); }); 

This code is working correctly.