How to remove time from DatePicker ui jquery
16,923
Solution 1
I finally found my answer. I added "{0:d}" on the view side.
<div class="form-group">
@Html.LabelFor(model => model.Project.DateFinished, new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.TextBoxFor(model => model.Project.DateFinished, "{0:d}", new { id = "datePickerEndDate" })
@Html.ValidationMessageFor(model => model.Project.DateFinished)
</div>
</div>
Thanks
Solution 2
$("#datePickerStartDate").datepicker({
dateFormat: 'mm/dd/yy',
changeMonth: true,
changeYear: true,
defaultDate: GetCurrentDate(),
onSelect: function () {
$(this).blur().change();
}
});
Solution 3
This is how I used it.
@Html.TextBoxFor(a => a.DOB, new { @class = "form-control", placeholder = "Date of Birth", id = "datetimepicker", TextMode = "date", value = "1/11/1989", onkeyup = "return validateChar(this)", maxlength = "20", style = "width:175px;height:25px;" })
<script>
$(document).ready(function () {
$('#datetimepicker').datetimepicker({
lang: 'en',
timepicker: false,
closeOnDateSelect: true,
dateFormat: "yy/mm/dd"
});
});
</script>
Author by
Raphael
Updated on June 14, 2022Comments
-
Raphael almost 2 years
I'm working with a jquery ui datepicker with asp.net mvc and when the web page open, it show the date with the time (2014/10/16 00:00:00) in the textbox for the datepicker, but if I select a date in the textbox for the datepicker, it will only show the date. I don't want to see the time, what's wrong?
Thanks!
The property in the model is set like this
[DataType(DataType.Date)] [Required(ErrorMessageResourceType = typeof(Ressources.Resources), ErrorMessageResourceName="ErrorStartDateRequired")] [Display(Name = "DateStarted", ResourceType = typeof(Ressources.Resources))] public DateTime DateStarted { get; set; }
My date picker is set like this in my web page:
@section scripts{ <script language="javascript" type="text/javascript"> $(document).ready(function () { var anchor = document.getElementById('@Model.Anchor'); anchor.scrollIntoView(true); var d = new Date(@Model.Project.DateStarted.Year, @Model.Project.DateStarted.Month, @Model.Project.DateStarted.Day); $("#datePickerStartDate").datepicker({ dateFormat: "yy/mm/dd", showOtherMonths: true, selectOtherMonths: true, showButtonPanel: true, changeMonth: true, changeYear: true, gotoCurrent: true, defaultDate: d }); });
}
and this is how the control is showed in the web page (cshtml)
<div class="form-group"> @Html.LabelFor(model => model.Project.DateStarted, new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.TextBoxFor(model => model.Project.DateStarted, new { id = "datePickerStartDate" }) @Html.ValidationMessageFor(model => model.Project.DateStarted) </div> </div>