how to use jQuery Timepicker in mvc 3?

Question

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!!

are you sure the id of the textbox is WorkDuration - normally it would be `ModelType_WorkDuration` — K. Bob, Jan 24 '12 at 10:42
Yes,I tried viewing the source (id="WorkDuration" name="WorkDuration") I also try changing it to datepicker(), and it work but I only need the time picker function. — fiberOptics, Jan 25 '12 at 02:08
What timepicker implementation are you using? Can you do a jsFiddle www.jsFiddle.net to show it not working? — K. Bob, Jan 25 '12 at 11:59

score 0 · Answer 1 · answered Jan 24 '12 at 10:44

0

Have you tried without, the timepicker addon, and used just simply datepicker?

like this:

  $( "#WorkDuration" ).datepicker();

answered Jan 24 '12 at 10:44

JahManCan

601
3
8
19

Nicholas Murray · Accepted Answer · 2012-01-25T09:36:49.807

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>

score 0 · Answer 3 · answered Jan 24 '12 at 11:20

0

Instead of:

<script type="text/javascript">
    $(document).ready(function () {
        $('#WorkDuration').timepicker({});
    });
</script>

Use:

<script type="text/javascript">
    $(document).ready(function () {
        $('#WorkDuration').datepicker();
    });
</script>

This should work

answered Jan 24 '12 at 11:20

Ademar

5,657
1
17
23

I only need the time picker function, date should not be included. – fiberOptics Jan 25 '12 at 02:06

score 0 · Answer 4 · answered Feb 14 '12 at 09:16

use this jquery: jquery.ptTimeSelect.js

Time:

$(document).ready(function () {

    var uId = 'ptTimeSelect_' + jQuery.ptTimeSelect._counter;
    $("#incidenttime").ptTimeSelect();
    $("#incidenttime").click(function () { $.ptTimeSelect.openCntr('' + uId + ''); });
    $("#incidenttime").focus(function () { jQuery.ptTimeSelect.openCntr('' + uId + ''); });
    $("#incidenttime").keypress(function (event) {
        if (event.keyCode == 13) {
            jQuery.ptTimeSelect.setTime();
            return false;
        }
    });
});

It is a best way i think so.

how to use jQuery Timepicker in mvc 3?

EDIT

4 Answers4