Home jQuery set date value in asp net core 2 razor
Reply: 1

jQuery set date value in asp net core 2 razor

Eda Jede
1#
Eda Jede Published in 2018-01-10 18:05:31Z

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);
Люсиен Мартинов
2#
Люсиен Мартинов Reply to 2018-01-18 13:12:56Z
[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.

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.440443 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO