格式为dd / MMM / YYYY的HTML5日期

时间:2017-09-06 03:32:24

标签: c# asp.net-mvc html5

我在MVC5 asp.net项目上使用格式为dd / MMM / YYYY的日期时遇到问题。主要是在Chrome上,因为它似乎只接受格式为yyyy / mm / dd的日期。

为了规范浏览器的行为,我使用了jquery datetimepicker组件。

我尝试了很多东西,但Chrome仍然说日期无效。即使将输入定义为文本而不是日期。

即使我关闭了该特定组件的验证(data-val =" false"),Chrome仍然坚持将日期标记为无效。

型号:

public class order 
{
    [Key]
    public int orderID { get; set; }

    [Required]
    public string comments { get; set; }

    [Required]
    [DisplayFormat(DataFormatString = "{0:dd/MMM/yyyy}", ApplyFormatInEditMode = false)]
    [Display(Name = "Date of Shipping")]
    public DateTime date { get; set; }
}

查看日期输入:

<div class="form-group">
    @Html.LabelFor(model => model.date, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.EditorFor(model => model.date, new { htmlAttributes = new { @class = "form-control datetimepicker" } })
        @Html.ValidationMessageFor(model => model.date, "", new { @class = "text-danger" })
    </div>
</div>

进口:

<script src="https://code.jquery.com/jquery-3.2.1.js"/script>
<link rel="stylesheet" type="text/css" href="~/Content/jquery.datetimepicker.min.css" />
<script src="~/Scripts/jquery.datetimepicker.full.min.js"></script>

使用Javascript:

<script type="text/javascript">
    jQuery.datetimepicker.setLocale('es');

    jQuery('#date').datetimepicker({
        format: 'd/M/Y',
    });
</script>

1 个答案:

答案 0 :(得分:0)

我终于能够解决这个问题了:

-Fisrt你需要将moment.js添加到你的项目中,可以使用NutGet管理器添加,然后在你的页面上引用:

@Scripts.Render("~/Scripts/moment-with-locales.min.js")

非常重要的是,如果使用非英语格式的日期,您需要导入与语言环境同时进行的操作,即使在更改语言环境后,它仍会保留为&#39; en&#39;

- 然后添加以下java脚本代码:

$.datetimepicker.setDateFormatter({
   parseDate: function (date, format) {
       var d = moment(date, format);
       return d.isValid() ? d.toDate() : false;
},

formatDate: function (date, format) {
    return moment(date).format(format);
    }
});

$.validator.methods.date = function (value, element) {
    return this.optional(element) || moment(value, "DD/MMM/YYYY", 'es').isValid();
}

- 另请注意,datetimepicker初始化更改如下:

jQuery('#date').datetimepicker({
    format: 'DD/MMM/YYYY HH:mm',
    formatTime: 'HH:mm',
    formatDate: 'DD/MMM/YYYY'
});