How to display DateTime in ASP.NET with default value?

Viewed 45

I'm trying to get a datetime picker for my app with default value I've set in the constructor. However the website doesn't display the value I've set and it has a "comma" at the start of the date/format string...

My goal is to have a field formated as "dd/MM/yyyy hh:mm:ss" with DateTime picker.

ViewModel - WindowStart and WindowEnd are formatted differently on purpose to show different behaviour

using System;
using System.ComponentModel;
using System.ComponentModel.DataAnnotations;

namespace GIO.WEB.Models
{
    public class BookingWeb
    {
        [DataType(DataType.DateTime), Required]
        //[DisplayFormat(DataFormatString = "{0:dd/MM/yyyy hh:mm:ss}", ApplyFormatInEditMode = true)]
        public DateTime WindowStart { get; set; }

        [DataType(DataType.DateTime), Required]
        [DisplayFormat(DataFormatString = "0:g", ApplyFormatInEditMode = true)]
        
        public DateTime WindowEnd { get; set; }

        public BookingWeb()
        {
            WindowStart = DateTime.Now.Subtract(TimeSpan.FromHours(6));
            WindowEnd = DateTime.Now.AddHours(6);
        }
    }
}

Controller

public IActionResult CreateBooking()
{
    return View(new BookingWeb());
}

View

@using(Html.BeginForm("SubmitBooking", "BookingsController"))

{
    <div class="form-group">
        <div>
        @Html.LabelFor(s => s.CustomerReference)
        @Html.TextBoxFor(s => s.CustomerReference, new {@class = "form-control"})
        </div>
        <div>
        @Html.LabelFor(s => s.WindowStart)
        @Html.EditorFor(s => s.WindowStart, new {@class = "form-control"})
        </div>
        <div>
        @Html.LabelFor(s => s.WindowEnd)
        @Html.EditorFor(s => s.WindowEnd, new {@class = "form-control"})
        </div>
        <div>
        @Html.LabelFor(s => s.DriverName)
        @Html.TextBoxFor(s => s.DriverName, new {@class = "form-control"})
        </div>
        <div>
        @Html.LabelFor(s => s.VehicleRegPlate)
        @Html.TextBoxFor(s => s.VehicleRegPlate, new {@class = "form-control"})
        </div>
        <div>
        @Html.LabelFor(s => s.TrailerName)
        @Html.TextBoxFor(s => s.TrailerName, new {@class = "form-control"})
        </div>
    
        <input type="submit" value="Generate report" />
    </div>
}

Result

Result

1 Answers

I suggest you use Moment.JS date/time JavaScript library to handle date/time related formats at front-end. Back-end date/time formatting may or may not get applied sometimes.

Related