ASP.NetMVC5日期/日期挑选

时间:2017-08-17 16:18:01

标签: html css asp.net-mvc-5 datepicker

我试图在我的Code第一个ASP.Net应用程序中实现日历日期选择器。

目前,这就是我的代码在名为" Student.cs"

的模型中的样子
[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:yyyy/mm/dd}")]
[DisplayName("Date of Birth")]
[DataType(DataType.Date)]
[Range(typeof(DateTime), "1995/01/01", "2016/12/31")]
public DateTime DateOfbirth { get; set; }

然而,这给了我一个组合框类型的日期选择器,我也很难设置格式。

我想实现以下jQuery datepicker:

<script>
  $( function() {
    $( "#datepicker" ).datepicker();
  } );
 </script>

然后,使用

<input type="text" id="datepicker">

在视图html文件中,我应该可以为我的出生日期字段设置一个日历吗?

我不确定上面脚本的放置位置,而且我也不确定在View文件中更改输入类型的位置。 目前,视图文件使用以下代码控制日期,我不确定如何更改以实现&#39; datepicker&#39;成分

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

1 个答案:

答案 0 :(得分:2)

低“mm”代表分钟。资本“MM”代表月份。

[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:yyyy/MM/dd}")]

此外,你的jQuery函数只能在你加载jQuery库之后才能工作,所以如果它在_Layout.cshtml DOM的末尾加载,就像它通常一样,你需要在库之后将脚本放在一个包中加载。

您也不希望第二个<input>标记EditorFor已经执行。就像写

一样
@Html.EditorFor(model => model.DateOfbirth, new { htmlAttributes = new { @class = "form-control", id = "datepicker" } })

我认为这就是你需要解决的问题。

我会告诉你我的文化功能是什么样的:

$(function () {
    $("[type=datetime]").datepicker({
        closeText: 'Fechar',
        prevText: '',
        nextText: '',
        currentText: 'Hoje',
        monthNames: ['Janeiro', 'Fevereiro', 'Mar&ccedil;o', 'Abril', 'Maio', 'Junho',
        'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
        monthNamesShort: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun',
        'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
        dayNames: ['Domingo', 'Segunda-feira', 'Ter&ccedil;a-feira', 'Quarta-feira', 'Quinta-feira', 'Sexta-feira', 'Sabado'],
        dayNamesShort: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sab'],
        dayNamesMin: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sab'],
        weekHeader: 'Sm',
        dateFormat: 'dd/mm/yy',
        firstDay: 0,
        isRTL: false,
        showMonthAfterYear: false,
        yearSuffix: '',
        changeMonth: true,
        changeYear: true
    });
});