CODEWITHSUNDEEP
c#asp.net-mvcdatetimedatepickerbootstrap-datepicker
Keras-JOB
Keras-JOB

Reputation: 125

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

enter image description here

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:

enter image description here

I need that picker to display only years (also in edit view) and retain fixed the day and the month (12/31). Any ideas?

Upvotes: 0

Views: 2754

Answers (3)

Mena Samer
Mena Samer

Reputation: 124

I think you need to drop down the list of years, not datetimepicker. you can see this solution 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

Upvotes: 1

Keras-JOB
Keras-JOB

Reputation: 125

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?

Upvotes: 0

M Arif Sarıkaya
M Arif Sarıkaya

Reputation: 21

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

minViewMode

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

Upvotes: 0

Related Questions