Как использовать JQuery Timepicker в MVC 3? - PullRequest
Новая
       6

Как использовать JQuery Timepicker в MVC 3?

0 голосов
/ 24 января 2012

Пока мой мозг не кровоточит, я все еще не могу решить эту проблему. Я должен использовать jQuery timepicker на моем текстовом поле в mvc3-View.

Внутри моего 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>

Внутри Create Вид: 

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

Идентификатор текстового поля - «WorkDuration». Timepicker не отображается. Теперь, что я пропустил? Надеюсь, кто-нибудь может помочь. Спасибо!

**

EDIT

**

Я нашел ответ, теперь это должно сработать:

Внутри 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>

Ссылка:

Тема Timepicker не работает

Спасибо за все ответы !!

Ответы [ 4 ]

0 голосов
/ 14 февраля 2012

используйте этот jquery: jquery.ptTimeSelect.js

Время:

$ (документ) .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;
        }
    });
});

Это лучшийкак я думаю.

0 голосов
/ 24 января 2012

Должна быть некоторая проблема с именованием вашего текстового поля WorkDuration.

Но если имя текстового поля определенно содержит WorkDuration, то атрибут jquery содержит селектор применит выбор времени.

Из вашего комментария ниже кажется, что вы, возможно, неправильно ссылались на свои сценарии, Asp.Net MVC называет папку, содержащую файлы javascript, как Scripts , в то время как ваш код ссылается на папку с именем Сценарий .

Чтобы убедиться в правильности имени папки, перетащите любые файлы, на которые вы хотите сослаться, из их папки на страницу макета.

Я мог бы заставить таймер работать, используя код ниже.

Скрипты и 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 голосов
/ 24 января 2012

Вместо: 

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

Использование: 

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

Это должно работать

0 голосов
/ 24 января 2012

Вы пробовали без аддона Timepicker, и использовали просто просто DatePicker?

как это: 

  $( "#WorkDuration" ).datepicker();
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...