Datepicker with only Years

Question

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. I want the day and the month to be always the same (31/12/year) and allow the user to select only the year. Something like this:

In my model I have this datetime field:

[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.

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). Any ideas?

score 1 · Answer 1 · answered Jun 09 '21 at 06:52

1

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.

And you can use select2 plugin, it will help the users to search in dropdownlist

answered Jun 09 '21 at 06:52

Mena Samer

122
1
11

Hi. Maybe I need a list. But that list must display the years "automatically" like a datepicker. That is, show all the years without doing myself from code. Display all the years like a datepicker. – Keras-JOB Jun 09 '21 at 07:03
I did not see that before, I advice you do not lose your time in this and you can use drop down side label 31/12/ [year] – Mena Samer Jun 09 '21 at 07:11

score 0 · Answer 2 · answered Jun 09 '21 at 07:01

0

If you are using bootstrap-datepicker, try below format.

minViewMode

You can look at the document from here: bootstrap-datepicker

answered Jun 09 '21 at 07:01

M Arif Sarıkaya

11
2

Hi. I tried to use boostrap: https://qawithexperts.com/article/bootstrap/select-only-year-in-bootstrap-datepicker/323 but it didn't work. It display an input, but when I select the input, nothing appear. Maybe is because the sample is not complete. I would like some example like that url but complete. Thanks – Keras-JOB Jun 09 '21 at 07:08
Hi @Keras-JOB I tried now and that sample is working. Please make sure you added JQuery, bootstrap, and bootstrap-datepicker packages or cdns and the stylesheet links – M Arif Sarıkaya Jun 09 '21 at 07:57
I copy-paste all the code and it didn't work. Is because what you're saying: "JQuery, bootstrap, and bootstrap-datepicker packages or cdns and the stylesheet links". What I have to do? Install from nuget? Or just copy some css styles in my site.css? – Keras-JOB Jun 09 '21 at 08:22

Keras-JOB · Answer 3 · 2021-06-10T09:02:14.050

Hello @M Arif Sarıkaya.

I found why it don't work. It's because of the _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. Is there a way to combine them safely?

Datepicker with only Years

3 Answers3