javascript - TimePicker Razor ASP.NET-MVC - Stack Overflow

admin管理员组

文章数量:1332353

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=".11.3/themes/smoothness/jquery-ui.css" type="text/css" />
<script src=".10.2.js"></script>
<script src=".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>

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./ui/1.11.3/themes/smoothness/jquery-ui.css" type="text/css" />
<script src="http://code.jquery./jquery-1.10.2.js"></script>
<script src="https://code.jquery./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! :)

• javascript
• jquery
• asp-mvc
• razor
• timepicker

Share Improve this question Follow asked Apr 11, 2016 at 7:44 Estel_RebelEstel_Rebel 4311 gold badge11 silver badge66 bronze badges 1

• TypeError: $(...).timepicker is not a function – Estel_Rebel Commented Apr 11, 2016 at 7:54

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

jQuery-UI addon is required for timepicker control.

check here : https://jsfiddle/dmc55erf/8/

<link rel="stylesheet" href="https://code.jquery./ui/1.11.3/themes/smoothness/jquery-ui.css" type="text/css" />
    <script src="https://code.jquery./jquery-2.2.2.js"></script>
    <script src="https://code.jquery./ui/1.11.3/jquery-ui.min.js"></script>
    <script src="https://cdnjs.cloudflare./ajax/libs/jquery-timepicker/1.8.1/jquery.timepicker.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare./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>

本文标签： javascriptTimePicker Razor ASPNETMVCStack Overflow