我试图在我的代码第一个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; }
但是,这给了我一个组合框类型的datepicker,我也在努力设置其格式。
我想实现以下jQuery datepicker:
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
然后,使用
<input type="text" id="datepicker">
在查看html文件中,我应该能够为我的出生日期字段设置一个日历吗?
我不确定上面脚本的放置位置,也不确定在View文件中更改输入类型的位置。当前,视图文件使用以下代码控制日期,我不确定如何更改这些代码以实现“ datepicker”组件。
<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>
较低的“ 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
});
});
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句