How to only make month and year appear ASP.NET MVC

Question

I am trying to get the month and year to appear instead of dd/mm/yyyy. My code is below:

Heres the model code

[Display (Name = "ValidFrom")]
        [DataType(DataType.Date)]
        [DisplayFormat(DataFormatString = "{0:MMM-yyyy}" , ApplyFormatInEditMode = true)]
        public System.DateTime ValidFrom { get; set; }

This is view file

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

        </div>
    </div>

Is there a way where I can only make mm/yyyy appear?

@Liam I think he is not really referring to a datepicker but to `' , please see this post http://stackoverflow.com/questions/7372038/is-there-any-way-to-change-input-type-date-format — SOfanatic, Mar 15 '16 at 13:41
Are the three M's (MMM-yyyy) messing with the string formatting somehow? — Dan Orlovsky, Mar 15 '16 at 13:44
I know this is an old question, but HTML5 supports type="month" inputs, which bring up the browser's month picker. — CyberClaw, Aug 23 '19 at 10:37

CyberClaw · Answer 1 · 2019-08-23T10:44:20.210

HTML5 supports type month. So, using a textboxfor as example you could do:

@Html.TextBoxFor(m => m.MonthYear, new { type = "month"})

This would use the browsers own month picker (on Chrome, Firefox and Edge).

In practice, this creates this HTML:

<input id="MonthYear" name="MonthYear" type="month">

By default HTML5 month type displays MMMM yyyy (so full month name and 4 character year), or whatever the local default is (for example in portuguese it'll display "agosto de 2019".

The default value, or the model value is always read in "yyyy-MM" though, so no need to worry with browsers in different languages.

Finally the data is in DateTime in the MVC side of things (so, it'd come out 1/month/year 12:00:00 AM) with day defaulting to 1 (very much like hours minutes and seconds are also set to default when not in use).

score 2 · Accepted Answer · answered Mar 15 '16 at 14:48

2

Apply this attribute. I have tested this and works fine.

[DisplayFormat(DataFormatString ="{0:MM/yyyy}",ApplyFormatInEditMode =true)]

answered Mar 15 '16 at 14:48

Thanigainathan

1,505
14
25

score 0 · Answer 3 · edited Mar 15 '16 at 14:21

0

You can use the Moment.js library like:

moment().format("MMM  YY")

edited Mar 15 '16 at 14:21

NathanOliver

171,901
28
288
402

answered Mar 15 '16 at 14:20

MNF

687
9
13

score 0 · Answer 4 · answered Mar 15 '16 at 14:29

From a UI standpoint, what you have should work fine. However, if the input is being rendered as type="date" by a browser that supports the date HTML5 input type, then the browser control will override the display. There's no HTML5 control for just month and year, so if you need it formatted that way, you'll need to ensure you use a standard type="text" input.

That said, I'm really not sure whether the posted value will bind coming back to MVC. It might, but it also might not. If it doesn't bind correctly, you may need to post to a string property and then coerce it into a DateTime. You could do something like:

public string ValidFromString { get; set; }

public DateTime ValidFrom
{
    get
    {
        DateTime validFrom;
        return DateTime.TryParse(ValidFromString, out validFrom)
            ? validFrom
            : default(DateTime);
    }
    set { ValidFromString = value.ToString("MMM-yyyy"); }
}

Then, you would post to ValidFromString and persist ValidFrom.

There is a control for type month in HTML5 called type="month". Chrome, Firefox and Edge support it, and show a month picker. — CyberClaw, Aug 23 '19 at 10:26

How to only make month and year appear ASP.NET MVC

4 Answers4

Linked