Store DateTime from 3 DropDownListFor (day, month, year) in ASP.NET MVC

Viewed 189

I am trying to store a DateTime object into my SQL database using ASP.NET MVC.

@Html.DropDownListFor(model => model.ModifiedDate, Enumerable.Range(1, 31).Select(i => new SelectListItem { Value = i.ToString(), Text = i.ToString()}), "-- Select Day --")
@Html.DropDownListFor(model => model.ModifiedDate, Enumerable.Range(1, 12).Select(i => new SelectListItem { Value = System.Globalization.CultureInfo.InvariantCulture.DateTimeFormat.GetMonthName(i), Text = System.Globalization.CultureInfo.InvariantCulture.DateTimeFormat.GetMonthName(i) }), "-- Select Month --")
@Html.DropDownListFor(model => model.ModifiedDate, Enumerable.Range(2018, 5).Select(i => new SelectListItem { Value = i.ToString(), Text = i.ToString()}), "-- Select Year --")
@Html.ValidationMessageFor(model => model.ModifiedDate, "", new { @class = "text-danger" })

I am using three (3) DropDownListFor day, month and year respectively.

Is there a way to successfully store all 3 inputs from each dropdown to be stored as one single date in my ModifiedDate column?

2 Answers

you can use this code. Using the script, you can validate the client's date.

@Html.DropDownList("Day", Enumerable.Range(1, 31).Select(i => new SelectListItem { Value = i.ToString(), Text = i.ToString() }), "-- Select Day --",new { @class="myDate"})
@Html.DropDownList("Month", Enumerable.Range(1, 12).Select(i => new SelectListItem { Value = System.Globalization.CultureInfo.InvariantCulture.DateTimeFormat.GetMonthName(i), Text = System.Globalization.CultureInfo.InvariantCulture.DateTimeFormat.GetMonthName(i) }), "-- Select Month --", new { @class = "myDate" })
@Html.DropDownList("Year", Enumerable.Range(2018, 5).Select(i => new SelectListItem { Value = i.ToString(), Text = i.ToString() }), "-- Select Year --", new { @class = "myDate" })
<br />
@Html.TextBoxFor(model=>model.ModifiedDate, new { @readonly=true, style="background:#888;color:white;text-align:center;border:1px solid #ddd"})
@Html.ValidationMessageFor(model => model.ModifiedDate, "", new { @class = "text-danger" })

script

@section scripts{
    <script>
        var day = document.getElementById("Day");
        var month = document.getElementById("Month");
        var year = document.getElementById("Year");
        var ModifiedDate = document.getElementById("ModifiedDate");
        ModifiedDate.value = '0000-00-00';

       
        $('.myDate').on('change', function () {
            var d, m, y;

            if (day.selectedIndex > 0)
                d = day.options[day.selectedIndex].text;
            else
                d = "00";

            if (month.selectedIndex > 0)
                m = month.options[month.selectedIndex].text;
            else
                m = "00";

            if (year.selectedIndex > 0)
                y = year.options[year.selectedIndex].text;
            else
                y = "0000";


            var date = y + '-' + m + '-' + d;
            ModifiedDate.value = date;
        });
     </script>
}

You can create a model with three property for day, month and year and set their values in your view. after that you can create a DateTime property with these values and store it in your database.

Here is DateModel.cs :

public class DateModel
{
    public int Year { get; set; }
    public int Month { get; set; }
    public int Day { get; set; }

    public DateTime ModifiedDate
    {
        get
        {
            return new DateTime(this.Year, this.Month, this.Day, 0, 0, 0);
        }
    }
}

I change your view code to get the number of month instead of month name, see this line:

@Html.DropDownListFor(model => model.Month, Enumerable.Range(1, 12).Select(i => new SelectListItem { Value = i.ToString(), Text = System.Globalization.CultureInfo.InvariantCulture.DateTimeFormat.GetMonthName(i) }), "-- Select Month --")

It's view's code :

@using (Html.BeginForm("Operate", "Test", FormMethod.Post))
{

    @Html.DropDownListFor(model => model.Day, Enumerable.Range(1, 31).Select(i => new SelectListItem { Value = i.ToString(), Text = i.ToString() }), "-- Select Day --")
    @Html.DropDownListFor(model => model.Month, Enumerable.Range(1, 12).Select(i => new SelectListItem { Value = i.ToString(), Text = System.Globalization.CultureInfo.InvariantCulture.DateTimeFormat.GetMonthName(i) }), "-- Select Month --")
    @Html.DropDownListFor(model => model.Year, Enumerable.Range(2018, 5).Select(i => new SelectListItem { Value = i.ToString(), Text = i.ToString() }), "-- Select Year --")

    <button type="submit">Operate</button>
}
Related