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

jQuery set date value in asp net core 2 razor

user3197
1#
user3197 Published in May 26, 2018, 9:41 pm

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);
You need to login account before you can post.

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

© 2016 Powered by mzan.com design MATCHINFO