DateTimePicker w MVC przy użyciu JQuery-UI

Question

W mojej aplikacji mvc, potrzebuję datetimepicker. Mam kod do tego od Here.

Najpierw odnoszę się do tych plików js i css.

<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" /> 

Następnie

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

aw skrypcie

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

Więc mam próbnika datetime takiego.

Ale tutaj czas jest wybranie za pomocą suwaka. Próbuję zrobić to jak następujący typ.

Więc próbował w ten sposób.

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

Ale wciąż nadchodzi jak w starym stylu. To z suwakiem. Jak mogę zmienić na drugi typ?

Answer 1

Tworzę jsfiddle z example.

Wszystko działa jak urok.

Przypuszczam, że po prostu nie dodajesz js lub CSS. Oto, co dodaję:

<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

proszę skontaktować się z poniższym linku

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", 

    }); 
}); 

Ten kod działa poprawnie tutaj.

Answer 3

Wreszcie działa dobrze. Kod działa jest

<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> 

A to daje wyjście jak,

Dzięki wszystkim.