如何格式化JQuery日期選擇器

Question

我已經成功安裝了JQuery日期選擇器（ http://jqueryui.com/datepicker/ ），但是默認情況下它是透明的。

我找到了該站點，該站點為您提供了CSS文件來格式化選擇器： http : //rtsinani.github.io/jquery-datepicker-skins/

我要使用的皮膚是在此處找到的“ cangas.datepicker.css”： https ://raw.github.com/rtsinani/jquery-datepicker-skins/master/css/cangas.datepicker.css

我遇到的問題是我對CSS不好，也不知道如何實現CSS。 我正在.NET MVC 4.5中編程

我的視圖如下所示：

@model GRM_Reports.Models.ReportsModel

@{
    ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}


<link type ="text/css" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-    ui.css" />
 <link href="~/Content/themes/latoja.datepicker.datepicker.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js" ></script>

    <h2>Reports</h2>


@using (Html.BeginForm("Submit", "Report", FormMethod.Post))
{

    @Html.TextBox("MyDate", Model.ReportDate)

    @*<input type="text" id="MyDate" style="border:solid" />*@

    <table>
        <tr style="font-weight:bold">

            <td>
                Report Name
            </td>
            <td>
                Number Of Rows
            </td>
            <td>
                Number Of Errors
            </td>
            <td>
                Run Report
            </td>
            <td>
                Message
            </td>
        </tr>

        @for (int i = 0; i < Model.ReportList.Count; i++)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => Model.ReportList[i].ReportName)
                    @Html.HiddenFor(modelItem => Model.ReportList[i].ReportName)

                </td>
                <td>
                    @Html.DisplayFor(modelItem => Model.ReportList[i].NumberOfRows)
                    @Html.HiddenFor(modelItem => Model.ReportList[i].NumberOfRows)
                </td>
                @*<td>
                    @Html.DisplayFor(modelItem => Model.ReportList[i].NumberOfErrors)
                    @Html.HiddenFor(modelItem => Model.ReportList[i].NumberOfErrors)

                </td>*@
                <td>
                    @if (Model.ReportList[i].ReportName != "Risk Metrics - MS1 VAR" && Model.ReportList[i].ReportName != "Risk Metrics - MS2")
                    {
                        @Html.CheckBoxFor(modelItem => Model.ReportList[i].checkBox)
                        @Html.HiddenFor(modelItem => Model.ReportList[i].checkBox)
                    }
                </td>
                <td>

                    @Html.DisplayFor(modelItem => Model.ReportList[i].ResultMessage)

                </td>
            </tr>
        }
        <tr>
            <td colspan="4">
                <button type="submit"  id="Submit_Button_Click">Submit Request</button>

            </td>
        </tr>
    </table>
}
</div>

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

誰能告訴我如何將cangas.datepicker.css文件鏈接到datepicker？

非常感謝你！

Answer 1

第一。 將css文件添加到您的css文件夾中。

二，更換：

<link href="css/latoja.datepicker.css" rel="stylesheet">
<link type ="text/css" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-    ui.css" />

與：

<link type ="text/css" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-    ui.css" />
<link href="css/cangas.datepicker.css" rel="stylesheet">

我們在JQuery CSS之后導入自定義CSS的原因是為了不覆蓋規則。 （如果將兩個規則應用於同一元素，則后面的規則會獲得優先級）。

Answer 2

我的問題是這條線：

<link type ="text/css" href="//code.jquery.com/ui/1.10.4/themes

使用了jQuery庫1.10.4，而我使用的是1.9。 我沒看到

我只需要使用NuGet即可安裝JQuery UI的1.10.4軟件包。