TimePicker Razor ASP.NET-MVC
11,897
jQuery-UI addon is required for timepicker control.
check here : 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>
Author by
Admin
Updated on June 24, 2022Comments
-
Admin almost 2 years
I'm trying to create a TimePicker with Razor and JQueryUI in my bootstrap web. I created a DatePicker, and I know that I could create a DateTimePicker with JQuery, but I don't want to select the date and the time together, I want to select it with two different TextBox.
So I saw many tutorials, but all of them create a DateTimePicker, and when I tried to create a TimePicker with the same format, that didn't worked for me.
This is my 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 and 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;" }) }
Thanks! :)
-
Admin about 8 yearsstill not working, I have this error now "SyntaxError: expected expression, got '.'", I have your code and at the Html the same code, what could it be?
-
saif iqbal about 8 years@Estel_Rebel Please check now .Made some changes.