how to use jQuery Timepicker in mvc 3?

Question

how to use jQuery Timepicker in mvc 3?

6.3k views Asked by fiberOptics At 14 September 2024 at 17:36

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

Original Q&A

There are 4 answers

JahManCan On 24 January 2012 at 10:44

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

like this:

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

Ademar On 24 January 2012 at 11:20

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

Deepakmahajan On 14 February 2012 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.

**Nicholas Murray** · Accepted Answer · 2012-01-24 11:15:52

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>

TechQA.

how to use jQuery Timepicker in mvc 3?

EDIT

There are 4 answers

Related Questions in C#

Related Questions in JQUERY

Related Questions in ASP.NET-MVC

Related Questions in ASP.NET-MVC-3

Related Questions in JQUERY-UI-TIMEPICKER

Popular Questions

Popular Tags

Trending Questions