jQuery在ASP Net Core 2剃须刀中设置日期值 [英] jQuery set date value in asp net core 2 razor

问题描述

我在asp net core剃须刀形式的jQuery中遇到问题.我可以使用jQuery在文本等输入类型中更改值，但不能更改日期类型，我不知道为什么.

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.

这里是Project模型的一部分，只是属性，我想在表单中对其进行更改:

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; }

这是Razor表单的一部分:

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>

这是我的jQuery脚本:

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>

正如我所说，我可以将monday值放入textare，textbox中，但是我不能键入="date"，这可能是因为razor在后台使用了一些datetimepicker，或者不允许我更改不知道 浏览器中的生成的"表单如下所示: 开放日期

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

解决

输入type = date中的日期基于系统的日期时间-因此服务器或您的本地计算机.但是事件我将Windows 10的本地日期时间更改为"dd.MM.yyyy" ，datetimepicker不接受jquery脚本中的该值.我已将输入日期的值格式设置为此"YYYY-MM-DD" .

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".

这是一个简单的示例，可以起作用:

型号:

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

查看:

<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);

推荐答案

[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;
    }

这可能是后端的一些解决方法.在名为"today"的变量中，您可以输入每一天，例如"OpeningDate"，它应返回所需的实际星期的星期一，当您获得x.Project.MondayOfCurrentWeek时，您将收到星期一的日期.如果有用，请发送一些反馈.

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.

这篇关于jQuery在ASP Net Core 2剃须刀中设置日期值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！