I didn't use jquery.ui's datepicker because I needed to select an entire week and multiple dates under different conditions, so I am using Keith Wood's datepicker in an EditorTemplate for my Date fields:
@model Nullable<DateTime>
@{
string name = ViewData.TemplateInfo.HtmlFieldPrefix;
string id = name.Replace(".", "_");
string dt = Model.HasValue ? String.Format("{0:d}",(string)Model.Value.ToShortDateString()) : string.Empty;
}
@Html.TextBox("", dt, new { @class = "datefield", @type = "date", @id = id })
<script type="text/javascript">
$(document).ready(function () {
$('#@id').datepick({
renderer: $.datepick.themeRollerRenderer,
multiSelect: 999
});
});
</script>
Validation works just fine when using a textbox and having the datepicker "pop-up"; but what I really want is to use an inline datepicker, but I can't get validation to work under these conditions:
@model Nullable<DateTime>
@{
string name = ViewData.TemplateInfo.HtmlFieldPrefix;
string id = name.Replace(".", "_");
string dt = Model.HasValue ? String.Format("{0:d}",(string)Model.Value.ToShortDateString()) : string.Empty;
}
<div class="kwdp">
</div>
@Html.Hidden("", dt, new { @class = "datefield", @id = id })
<script type="text/javascript">
$(document).ready(function () {
$('.kwdp').datepick({
renderer: $.datepick.themeRollerRenderer,
multiSelect: 999
});
});
</script>
Here is a snip-it of my custom client-side validation:
form.validate({
rules:{
StartDate: {
required: true,
dpDate: true
}
},
messages: {
StartDate: 'Please enter a valid date (dd-mm-yyyy)'
}
});
And here is the definition of the DateTime field in my Data Class:
[Required]
[DataType(DataType.Date)]
[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:dd-MM-yyyy}")]
public Nullable<DateTime> StartDate { get; set; }
I understand that I should add an onSelect for the datepicker to populate the hidden field with date(s), but regardless, I should get an error when the hidden field value is empty, but its not validating. The html markup is rendered as the following:
<input name="StartDate" class="datefield" id="StartDate" type="hidden" data-val-required="The StartDate field is required." data-val="true" data-val-date="The field StartDate must be a date." value=""/>
I am using the following libraries:
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/datepick/jquery.datepick.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/datepick/jquery.datepick.ext.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/datepick/jquery.datepick.validation.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.ui.datepicker.validation.min.js")" type="text/javascript"></script>
I found a similar un-answered question that looks the developer is having the same problem, but no posted solution. Any ideas to where I am going wrong?