TimePicker Razor ASP.NET-MVC

Question

Ich versuche, ein TimePicker mit Razor und JQueryUI in meinem Bootstrap-Web zu erstellen. Ich habe einen DatePicker erstellt, und ich weiß, dass ich einen DateTimePicker mit JQuery erstellen kann, aber ich möchte das Datum und die Zeit nicht zusammen auswählen, ich möchte es mit zwei verschiedenen TextBoxen auswählen.

So sah ich viele Tutorials, aber alle von ihnen erstellen einen DateTimePicker, und wenn ich versuchte, einen TimePicker mit dem gleichen Format zu erstellen, hat das für mich nicht funktioniert.

Dies ist mein Code:

JavaScript:

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" type="text/css" /> 
 
<script src="http://code.jquery.com/jquery-1.10.2.js"></script> 
 
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script> 
 
<script language="javascript" type="text/javascript"> 
 
    $(document).ready(function() { 
 
     $('#datepicker').datepicker({ 
 
      showOptions: { speed: 'fast' }, 
 
      changeMonth: false, 
 
      changeYear: false, 
 
      dateFormat: 'dd/mm/yy', 
 
      gotoCurrent: true 
 
     }); 
 
     $('#timepicker').timepicker(); 
 
    }); 
 
</script>

Razor und Html:

@using (Html.BeginForm()) 
    { 
     @Html.TextBox("date", DateTime.Now.ToShortDateString(), new { @id = "datepicker", @readonly = "readonly", @style = "width:250px;" }) 
     <br /> 
     @Html.TextBox("time","-- Select Time --", new { @id = "timepicker", @readonly = "readonly", @style = "width:250px;" }) 
    } 

Dank! :)

Answer 1

Das jQuery-UI-Addon wird für die Timepicker-Steuerung benötigt.

Check hier: https://jsfiddle.net/dmc55erf/8/

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" type="text/css" /> 
    <script src="https://code.jquery.com/jquery-2.2.2.js"></script> 
    <script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.8.1/jquery.timepicker.min.js"></script> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.8.1/jquery.timepicker.min.css" type="text/css" /> 
    <script language="javascript" type="text/javascript"> 
     $(document).ready(function() { 
      $('#datepicker').datepicker({ 
       showOptions: { speed: 'fast' }, 
       changeMonth: false, 
       changeYear: false, 
       dateFormat: 'dd/mm/yy', 
       gotoCurrent: true 
      }); 
      $('#timepicker').timepicker(); 
     }); 
    </script>