2

I have a problem with jQuery in my asp net core razor form. I can change values, using jQuery, in input types like text, but not of type date, I don't know why.

Here is part of the Project model, just the property, which I want to change in form:

[DataType(DataType.Date)]
public DateTime? OnSite { get; set; }

[Display(Name = "Opening date")]
[DataType(DataType.Date)]
public DateTime? OpeningDate { get; set; }

Here is the part of Razor form:

<div class="form-group">
   <label asp-for="Project.OnSite" class="control-label"></label>
   <input asp-for="Project.OnSite" class="form-control" style="width: 170px"/>
   <span asp-validation-for="Project.OnSite" class="text-danger"></span>
</div>

and here is my jQuery Script:

$(@Html.IdFor(x => x.Project.OpeningDate)).change(function () {
            var openingDate = $(@Html.IdFor(x => x.Project.OpeningDate)).val();
            var monday = moment(openingDate).day("Monday").format("MM/DD/YYYY HH:mm:ss");
            //alert(monday);

            $((@Html.NameFor(x => x.Project.OnSite))).val(monday);

});

This is how looks generated form (source page view):

<div class="form-group">
   <label class="control-label" for="Project_OnSite">OnSite</label>
   <input class="form-control" style="width: 170px" value="" type="date" id="Project_OnSite" name="Project.OnSite" />
    <span class="text-danger field-validation-valid" data-valmsg-for="Project.OnSite" data-valmsg-replace="true"></span>
</div>

As I said, I can put the monday value to textare, textbox, but I can't to type="date", probably because razor uses some datetimepicker on background, which won't let me change in, or I don't know. The Generated form in browser looks like this: Opening date

And this is just the input which i want to change (to monday of current week): OnSite date

Resolve

Date in input type=date is based on datetime of the system - so the server or your local machine. But Event I changed my local datetime of my windows 10 to "dd.MM.yyyy", the datetimepicker doesn't accept this value from the jquery script. I had format the value of input dates to this "YYYY-MM-DD".

This is simple example which works:

Model:

[DataType(DataType.Date)]
public DateTime? OnSite { get; set; }

View:

<div class="form-group">
     <label asp-for="Project.OnSite" class="control-label"></label>
     <input asp-for="Project.OnSite" class="form-control" />
     <span asp-validation-for="Project.OnSite" class="text-danger"></span>
</div>

JQuery:

var dateFormat = "YYYY-MM-DD";
var openingDate = $(@Html.IdFor(x => x.Project.OpeningDate)).val();
var monday1 = moment(openingDate).day("Monday").day(-6).format(dateFormat);
$(@Html.IdFor(x => x.Project.OnSite)).val(monday1);
Eda Jede
  • 81
  • 6
  • I've had bad experience using input type="date" as browsers try to manipulate the field. Try changing it to type="text" and see if that solves your problem. – DrewB Jan 10 '18 at 21:33
  • Yes, it is possible way, but I am more curious about why it doesn't work and how to make it work. – Eda Jede Jan 11 '18 at 08:23
  • 1
    Possible duplicate of [set date in input type date](https://stackoverflow.com/questions/12346381/set-date-in-input-type-date) – DrewB Jan 11 '18 at 11:35

1 Answers1

0
[Display(Name = "Monday")]
[DataType(DataType.Date)]
public DateTime? MondayOfCurrentWeek
    {
        get
        {
            DateTime today = DateTime.Today;
            int currentDayOfWeek = (int)today.DayOfWeek;
            DateTime sunday = today.AddDays(-currentDayOfWeek);
            DateTime monday = sunday.AddDays(1);
            return monday;
        };
        set;
    }

This is maybe a little workaround in the back-end. In variable named "today" you can put every day for example "OpeningDate" and it should return the date of Monday of the actual week you want and when you get x.Project.MondayOfCurrentWeek you will receive the date for Monday. Send some feedback if it is useful.

Люсиен Лозанов
  • 155
  • 2
  • 10