DateTimePicker in MVC mit JQuery-UI

Question

In meiner mvc-Anwendung brauche ich einen Datetimepicker. Ich habe einen Code dafür von Here.

Also zuerst verweise ich diese js und CSS-Dateien.

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

Dann

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

und im Skript,

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

So bekam ich einen Datetime-Picker wie diese.

Aber hier Zeit ist die Auswahl durch einen Schieberegler verwenden. Ich versuche es wie folgt aussehen zu lassen.

versuchte So wie diese.

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

Aber immer noch kommt es wie der alte Stil. Das ist mit Slider. Wie kann ich zum zweiten Typ wechseln?

Answer 1

Ich erstelle jsfiddle mit example.

Alles funktioniert wie Charme.

Ich nehme an, Sie fügen nur einige js oder CSS. Hier ist, was ich hinzufügen:

<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

Bitte überprüfen Sie mit untenstehenden 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", 

    }); 
}); 

Dieser Code richtig, hier zu arbeiten.

Answer 3

Endlich es funktioniert jetzt gut. Arbeits Code ist,

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

Und es den Ausgang zu geben wie,

Vielen Dank an alle.