我试图在我的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>
答案 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ç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ç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
});
});