0

I have an asp.net mvc4 application. in the view uploading i'd like to add a datapicker calendar so i modify the layout like this:

   <head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <meta charset="utf-8" />
        <title>@ViewBag.Title - Mon application ASP.NET MVC</title>
        <link href="~/akeo.ico" rel="shortcut icon" type="image/x-icon" />
        <link href="@Url.Content("~/Content/themes/base/jquery.ui.all.css")" rel="stylesheet" type="text/css" />
    <link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
    <link href="../../Content/jquery.ui.all.css" rel="stylesheet" type="text/css" />

    <script src="../../Scripts/jquery-1.4.1.min.js" type="text/javascript"/>
    <script src="../../Scripts/jquery.ui.core.js" type="text/javascript" />
    <script src="../../Scripts/jquery.ui.widget.js" type="text/javascript" />
    <script src="../../Scripts/jquery.ui.datepicker.js" type="text/javascript" />

    <script src="/Scripts/MicrosoftAjax.js" type="text/javascript" />
    <script src="/Scripts/MicrosoftMvcAjax.js" type="text/javascript" />
    <script src="/Scripts/MicrosoftMvcValidation.js" type="text/javascript" /> 
          <script>
              $(function () {
                  $("#datepicker").click(datepicker());
              });
    </script>
        <meta name="viewport" content="width=device-width" />
        @Styles.Render("~/Content/css")
        @Scripts.Render("~/bundles/modernizr")
    </head>

In the view Uploading.cshtml i put a text area for the datapicker:

@using (Html.BeginForm("Uploading", "Akeo", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    <input type="file" name="file" />
    <br />
    @Html.Label("Date d'expiration")
    <input type="text" name="duree" />
    <br />


    <input type="text" id="datepicker" />
    <input type="submit" value="OK" />

}

files The problem is when i click in text nothing is happened and the calendar did not appear.

What is the reason of this? How can i modify the code to correct this error?

4

2 回答 2

2

您的 javascript 代码应该是：

$(function () {
      $("#datepicker").datepicker();
});
于 2013-05-29T08:37:11.157 回答
0

您正在尝试通过 id 访问输入字段datepicker。更改选择输入字段的方式或在输入字段上添加 id，如下所示：

<input id="datepicker" type="text" name="duree" />

或者您可以将输入字段的类型更改为 date 并使用以下命令选择它：

$('input[type="date"]')

并将js更改为：

$('input[type="date"]').datepicker()

我建议你看看 HTML5 输入类型。日期类型得到越来越多的支持：http ://caniuse.com/input-datetime

如果您不关心所有这些，只需更改以下两个部分：

$(function() {
    $( "#myDate" ).datepicker();

});

<input type="text" id="myDate" />
于 2013-05-29T08:38:34.370 回答