CODEWITHSUNDEEP
c#asp.netasp.net-mvcdatedatepicker
John
John

Reputation: 127

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

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?

Upvotes: 2

Views: 11884

Answers (4)

CyberClaw
CyberClaw

Reputation: 445

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

Upvotes: 5

Thanigainathan
Thanigainathan

Reputation: 1547

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

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

Upvotes: 3

Chris Pratt
Chris Pratt

Reputation: 239300

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.

Upvotes: 0

MNF
MNF

Reputation: 717

You can use the Moment.js library like:

moment().format("MMM  YY")

Upvotes: 0

Related Questions