Home/ Questions/Q 7129425
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T11:14:29+00:00

Until my brain get bleeding, still I can’t solve this problem. I have to

  • 0

Until my brain get bleeding, still I can’t solve this problem. I have to use jQuery timepicker on my textbox in mvc3-View.

Inside my Layout.cshtml 

<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/titoms.css")" rel="stylesheet" type="text/css" />

    <link href="@Url.Content("~/Content/themes/base/jquery-ui-1.8.16.custom.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/themes/base/jquery.ui.datepicker.css")" rel="stylesheet" type="text/css" />

    <script src="@Url.Content("~/Script/jquery-1.7.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Script/jquery-ui-1.8.16.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Script/jquery-ui-timepicker-addon.js")" type="text/javascript"></script>

    <!--[if !IE 7]>
    <style type="text/css">
        #wrap {display:table;height:100%}
    </style>
    <![endif]-->
</head>
<body>
    <div id="wrap">
       <div id="main">
            <div id="tabs">
                <ul id="menu">
                    <li id="menu-first-item">
                        @Html.ActionLink("Home", "Index", "Home")</li>
                </ul>
            </div>
            <div id="render">
                @RenderBody()
            </div>
        </div>
    </div>
</body>
</html>

Inside the Create View: 

<script type="text/javascript">
    $(document).ready(function () {
        $('#WorkDuration').timepicker({});
    });
</script>
<div id="page-title" class="text-indent">
    <h2>
        Create new shift</h2>
    <div id="Optiontab">
        @Html.ActionLink("Browse", "Index")
    </div>
</div>
@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)
    <div class="fieldset">
        <div class="editor-label">
            @Html.LabelFor(model => model.WorkDuration)
        </div>

        <div class="editor-field">
            @Html.TextBoxFor(model => model.WorkDuration)
            @Html.ValidationMessageFor(model => model.WorkDuration)
       </div>
   </div>
 }

The id of the textbos is “WorkDuration”. The timepicker doesn’t show.
Now, what I’ve missed? Hope someone could help. Thanks!

**

EDIT

**

I’ve found the answer, this should work now:

Inside layout.cshtml 

<head>
    <title>@ViewBag.Title</title>

    <link href="@Url.Content("~/Content/titoms.css")" rel="stylesheet" type="text/css" />
    <link type="text/css" href="@Url.Content("~/Content/jquery-ui-titoms.css")" rel="stylesheet" />

    <style type="text/css">
        #ui-datepicker-div, .ui-datepicker{ font-size: 80%; }
        .ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
        .ui-timepicker-div dl { text-align: left; }
        .ui-timepicker-div dl dt { height: 25px; margin-bottom: -25px; }
        .ui-timepicker-div dl dd { margin: 0 10px 10px 65px; }
        .ui-timepicker-div td { font-size: 90%; }
        .ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }       
    </style>

    <script type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/jquery-ui-1.8.16.custom.min.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/jquery-ui-timepicker-addon.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/jquery-ui-sliderAccess.js")"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            $("#WorkDuration, #AbsentTrigger, #LateTrigger, #StartTime, #EndTime").timepicker({
                addSliderAccess: true,
                sliderAccessArgs: { touchonly: false },
                showSecond: true,
                timeFormat: 'hh:mm:ss'
            });
        });
    </script>

    <!--[if !IE 7]>
    <style type="text/css">
        #wrap {display:table;height:100%}
    </style>
    <![endif]-->
</head>

Reference:

Timepicker theme not working

Thanks for all responses!!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    There must be some issue with the naming of your WorkDuration text box.

    But if the text box name definitely contains WorkDuration then the jquery attribute contains selector will apply the time picker.

    From your comment below it seems that you may not have referenced your scripts correctly, Asp.Net MVC names the folder that holds the javascript files as Scripts while your code is referencing a folder named Script.

    You can ensure you have the correct folder name by dragging any files you wish to reference from their folder onto your layout page.

    I could get the timepicker to work by using the code below.

    Scripts and CSS:

    <link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css" />
<link rel="stylesheet" href="http://jqueryui.com/demos/demos.css" />
<script src="http://jqueryui.com/jquery-1.7.1.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.core.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.widget.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.datepicker.js"></script>
<script src="http://trentrichardson.com/examples/timepicker/js/jquery-ui-1.8.16.custom.min.js"></script> 
<script src="http://trentrichardson.com/examples/timepicker/js/jquery-ui-timepicker-addon.js"></script>

    HTML:

    <input type="text" id="WorkDuration" name="example_WorkDuration" />

    JQuery:

    <script type="text/javascript">     
     $(document).ready(function () {         
        $('input[name*="WorkDuration"]').timepicker({});
     }); 
</script>
    • 0