格式dd/MMM/YYYY的HTML5日期

我在使用MVC5 asp.net項目的格式dd/MMM/YYYY的日期時遇到問題。主要在Chrome上，因爲它似乎只接受格式爲yyyy/mm/dd的日期。格式dd/MMM/YYYY的HTML5日期

爲了規範跨瀏覽器的行爲，我使用了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>

來源

2017-09-06 atlus

具有'[數據類型（DataType.Date）]'和'[DisplayFormat（DataFormatString = 「{0：DD/MMM/YYYY}」，ApplyFormatInEditMode =如果你使用一個jQuery的日期選擇器（然後你可以刪除'new {@type =「text」}' –

}如果你得到一個客戶端錯誤，它的因爲'jquery.validate'驗證日期基於'MM/dd/yyyy'格式。您需要重新配置驗證器以接受格式的日期 –

刪除'@type =「text」' - 此屬性不相關。另外你的datetimepicker格式似乎是錯誤的 - 它應該是'$（'＃date'）。datetimepicker（{format：「DD/MMM/YYYY」}）''。然後設置客戶端驗證：'$ .validator.methods.date = function（value，element）{return this.optional（element）|| $ .datetimepicker.parseDate（'DD/MMM/YYYY'，value）; }' –

我終於能夠解決這個問題：

-Fisrt需要moment.js添加到您的項目，它可以使用NutGet經理加入，然後在你的頁面引用：

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

非常重要的是，如果使用非英語格式的日期的工作，你需要輸入時刻與 - 的語言環境，如果沒有，甚至改變區域後，它就會留在這裏。「恩」

- 然後添加下面的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' 
});

來源

2017-09-06 16:48:23 atlus

格式dd/MMM/YYYY的HTML5日期

回答

相關問題