2

TimePicker http://trentrichardson.com/examples/timepicker/ソリューションを、DatePicker を使用する既存の ASP.Net MVC3 C# サイトに組み合わせる方法を理解するのに苦労しています。DatePicker は現在、それ自体で正常に動作していますが、日付だけでなく時刻も追加する必要があり、TimePicker は必要なものに完璧に見えますが、実装方法がわかりません。

例で次のコードが提供されていることがわかります。

$('#example1').datetimepicker();

しかし、それを既存のサイト/DatePicker 関数に組み込む方法がわかりません。

これらの JS ファイルを _Layout ページの HEAD セクションに含め、CSS を既存の DatePicker CSS ファイル (jquery-ui-1.7.3.custom.css) に追加したことを確認しました。

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

私のビューページには、入力を表示し、DatePicker 関数を呼び出す次のコードがあります (これは現在の形式で正常に動作します)。

@model test.Models.News
@{
    ViewBag.Title = "Create";
}

@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)

        <div class="editor-label">
            @Html.LabelFor(model => model.News_Date)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.News_Date, "News_Date", new { @ID = "News_Date" })
        </div>
        <p>
            <input type="submit" value="Create" />
        </p>
}

<script type="text/javascript">
    $(document).ready(function () {
        $("#News_Date").datepicker({
            showOptions: { speed: 'fast' },
            changeMonth: false,
            changeYear: false,
            dateFormat: 'dd/mm/yy',
            gotoCurrent: true
        });
    });
</script>

TimePicker 関数をインストールする方法がわからないので、MVC3 サイトの DatePicker で動作します。

誰かが気にしないなら、説明をいただければ幸いです。

どうもありがとう。

4

1 に答える 1

6

datepickerビューで呼び出しをに置き換え、datetimepicker両方に必要な引数を指定するだけです。

<script type="text/javascript">
    $(document).ready(function () {
        $('#News_Date').datetimepicker({
            // Arguments for the date picker
            showOptions: { speed: 'fast' },
            changeMonth: false,
            changeYear: false,
            dateFormat: 'dd/mm/yy',
            gotoCurrent: true,

            // Arguments for the time picker    
            showSecond: true,
            timeFormat: 'hh:mm:ss',
            stepHour: 2,
            stepMinute: 10,
            stepSecond: 10
        });
    });
</script>
于 2012-06-26T09:33:21.013 に答える