Using jquery timepicker with views in mvc

Question

I have an ASP.NET MVC project. I would like to use jquery timepicker in the view side. Here is the jquery timepicker : http://jonthornton.github.io/jquery-timepicker/ Here is the view code that I try to use :

@model OSICPT.Web.Models.CalismaViewModel

@{
    ViewBag.Title = "Çalışma Ekle";
}


@using (Html.BeginForm())
{
    //expected function to run timepicker.
    <script type="text/javascript">
    $(function() {
        $('#setTimeExample').timepicker();
        $('#setTimeButton').on('click', function (){
            $('#setTimeExample').timepicker('setTime', new Date());
        });
    });
    </script>

    @Html.AntiForgeryToken()

     @*code has been omitted for brevity*@

    <div class="form-horizontal">
        <h4>Çalışma Ekleme Sayfası</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.CalismaIslemiOzet, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.CalismaIslemiOzet, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.CalismaIslemiOzet, "", new { @class = "text-danger" })
            </div>
        </div>


        <div class="form-group">
            @*@Html.LabelFor(model => model.BaslamaZamani, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.BaslamaZamani, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.BaslamaZamani, "", new { @class = "text-danger" })
            </div>*@
            @*location of timepicker.*@
            <input id="setTimeExample" type="text" class="time ui-timepicker-input" autocomplete="off">
            <button id="setTimeButton">Set current time</button>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Ekle" class="btn btn-default" />
            </div>
        </div>
    </div>
}

<div>
    @Html.ActionLink("Back to List", "Anasayfa")
</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

When I run the code, the time picker dropdown has not been shown up to the view as expected. What is wrong with the code? thanks in advance.

Answer 1

I changed your code, look at last 10 lines.

    @model OSICPT.Web.Models.CalismaViewModel

    @{
        ViewBag.Title = "Çal??ma Ekle";
    }


    @using (Html.BeginForm())
    {
        //expected function to run timepicker.
        <script type="text/javascript">
        $(function() {
            $('#setTimeExample').timepicker();
            $('#setTimeButton').on('click', function (){
                $('#setTimeExample').timepicker('setTime', new Date());
            });
        });
        </script>

        @Html.AntiForgeryToken()

        @*code has been omitted for brevity*@

        <div class="form-horizontal">
            <h4>Çal??ma Ekleme Sayfas?</h4>
            <hr />
            @Html.ValidationSummary(true, "", new { @class = "text-danger" })
            <div class="form-group">
                @Html.LabelFor(model => model.CalismaIslemiOzet, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.CalismaIslemiOzet, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.CalismaIslemiOzet, "", new { @class = "text-danger" })
                </div>
            </div>


            <div class="form-group">
                @*@Html.LabelFor(model => model.BaslamaZamani, htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.EditorFor(model => model.BaslamaZamani, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.BaslamaZamani, "", new { @class = "text-danger" })
                    </div>*@
                @*location of timepicker.*@
                <input id="setTimeExample" type="text" class="time ui-timepicker-input" autocomplete="off">
                <button id="setTimeButton">Set current time</button>
            </div>

            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <input type="submit" value="Ekle" class="btn btn-default" />
                </div>
            </div>
        </div>
    }

    <div>
        @Html.ActionLink("Back to List", "Anasayfa")
    </div>

    @section Scripts {
        @Scripts.Render("~/bundles/jqueryval")
    }

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.timepicker.js"></script>
    <link rel="stylesheet" type="text/css" href="jquery.timepicker.css" />    
    <script>
        $('#setTimeExample').timepicker();
        $('#setTimeButton').on('click', function () {
            $('#setTimeExample').timepicker('setTime', new Date());
        });
    </script>