TimePicker Razor ASP.NET MVC

Question

Bootstrap web bilgisayarımda Razor ve JQueryUI ile bir TimePicker oluşturmaya çalışıyorum. Bir DatePicker oluşturdum ve JQuery ile bir DateTimePicker oluşturabileceğimi biliyorum, ancak tarih ve saati birlikte seçmek istemiyorum, iki farklı TextBox ile seçmek istiyorum.

Birçok öğretici gördüm, ancak hepsi bir DateTimePicker oluşturuyor ve aynı formatta bir TimePicker oluşturmaya çalıştığımda, bu benim için çalışmadı.

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>

Jilet ve 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;" }) 
    } 

Teşekkür

Bu benim kodudur! Timepicker kontrolü için jQuery-UI addon gereklidir

Answer 1

jQuery-UI addon. Burada

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