简体   繁体   English

只有年份的日期选择器

[英]Datepicker with only Years

I'm trying to implement an input datepicker in my asp.net-mvc project that display only years to create/edit new values of my model.我正在尝试在我的 asp.net-mvc 项目中实现一个输入日期选择器,它只显示创建/编辑我的 model 新值的年份。 I want the day and the month to be always the same (31/12/year) and allow the user to select only the year.我希望日期和月份始终相同(每年 31 月 12 日),并只允许用户 select 一年。 Something like this:像这样的东西:

在此处输入图像描述

In my model I have this datetime field:在我的 model 我有这个日期时间字段:

[Required]
[DataType(DataType.Date)]
[DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
public System.DateTime MyDate{ get; set; }

I tried "{0:yyyy-31-12}" but that don't work.我尝试了“{0:yyyy-31-12}”,但这不起作用。

And this is the Create view:这是创建视图:

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">

        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })

        <div class="form-group">
            @Html.LabelFor(model => model.MyDate, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.MyDate, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.MyDate, "", new { @class = "text-danger" })
            </div>
        </div>

    <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
}

This is my result:这是我的结果:

在此处输入图像描述

I need that picker to display only years (also in edit view) and retain fixed the day and the month (12/31).我需要该选择器仅显示年份(也在编辑视图中)并保留固定的日期和月份(12/31)。 Any ideas?有任何想法吗?

I think you need to Dropdown list of year not datetimepicker.我认为您需要下拉列表年份而不是日期时间选择器。 you can see this soluation Month and Year drop down list for ASP.NET mvc .您可以看到ASP.NET mvc 的解决方案月份和年份下拉列表

And you can use select2 plugin , it will help the users to search in dropdownlist您可以使用select2 插件,它将帮助用户在下拉列表中搜索

If you are using bootstrap-datepicker, try below format.如果您使用的是 bootstrap-datepicker,请尝试以下格式。

minViewMode

You can look at the document from here: bootstrap-datepicker您可以从这里查看文档: bootstrap-datepicker

Hello @M Arif Sarıkaya.你好@M Arif Sarıkaya。

I found why it don't work.我找到了为什么它不起作用。 It's because of the _layout.cshtml:这是因为 _layout.cshtml:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - Mi aplicación ASP.NET</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Nombre de la aplicación", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Inicio", "Index", "Home")</li>
                    <li>@Html.ActionLink("Acerca de", "About", "Home")</li>
                    <li>@Html.ActionLink("Contacto", "Contact", "Home")</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - Mi aplicación ASP.NET</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

This part was causing the error:这部分导致错误:

@Scripts.Render("~/bundles/jquery")

If I delete it, shows the datepicker.如果我删除它,显示日期选择器。 But I don't know why and also if that will cause me other errors in the rest of views.但我不知道为什么以及这是否会导致我在视图的 rest 中出现其他错误。 Is there a way to combine them safely?有没有办法安全地结合它们?

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM