Develop Reference

DateTime picker: Disable time later than current hour in current day and enable time for previous days

I have a DateTime Picker i want to limit errors in users input so i'm diabling any input for future dates and times. i want to disable times later than the current hour of the current day .At the same time, if the user wants to add an old day , all the times would be active and can select anytime from them.
<div class="form-group">
#Html.LabelFor(model => model.Start_Time, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Start_Time, new { htmlAttributes = new { #class = "form-control", ID = "StartTime" } })
#Html.ValidationMessageFor(model => model.Start_Time, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.End_Time, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.End_Time, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.End_Time, "", new { #class = "text-danger" })
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('input[type=datetime]').datetimepicker({
dateFormat: "dd/M/yy",
changeMonth: true,
changeYear: true,
yearRange: "-60:+0",
maxDate:0
});
});
</script>
i tried writing this function but the datetimepicker stopped popping so it's not working
$(document).ready(function () {
var theDay = new Date;
var theStartDate = $('#StartTime').value();
if (theStartDate === new Date) {
$('input[type=datetime]').datetimepicker({
dateFormat: "dd/M/yy",
changeMonth: true,
changeYear: true,
yearRange: "-60:+0",
maxDate: 0,
maxTime: 0
});
}
else if (theStartDate < new Date) {
$('input[type=datetime]').datetimepicker({
dateFormat: "dd/M/yy",
changeMonth: true,
changeYear: true,
yearRange: "-60:+0",
maxDate: theDay
});
}
});

Datetime showing when I just want date mvc textbox

I am using the date picker in admin lte but no mater what I do the date time picker will show.
#Html.LabelFor(model => model.DateReported)
#Html.EditorFor(model => model.DateReported, new { htmlAttributes = new { #class = "form-control
datetimepicker" } })
#Html.ValidationMessageFor(model => model.DateReported)
You will see the generated html is as follows.
<input class="form-control datetimepicker text-box single-line valid" data-val="true" data-val-
required="The DateReported field is required." id="DateReported" name="DateReported" type="datetime-
local" value="0001-01-01T00:00:00.000" aria-required="true" aria-describedby="DateReported-error"
aria-invalid="false">
But even though I have in my scripts done this.
And I have tried this.
#Html.LabelFor(model => model.DateReported)
#Html.EditorFor(model => model.DateReported, new { htmlAttributes = new { #class = "form-control
dateicker" } })
#Html.ValidationMessageFor(model => model.DateReported)
<script type="text/javascript">
$(function () {
$('.DateRaised').datepicker();
$('.DateReported').datepicker();
});
Even if I set it as such Presume its because it gets datetime data type from my model how do I show only date part in textbox.
#Html.LabelFor(model => model.DateReported)
#Html.EditorFor(model => model.DateReported, new { htmlAttributes = new { #class = "form-control
datepicker" } })
#Html.ValidationMessageFor(model => model.DateReported)
But this still procduces this view.

have you tried fixing it from the Model ?
[DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}")]
public DateTime DateReported{ get; set; }

You should mention the date format on initializing datepicker in Jquery function:
$(function () {
$('.DateRaised').datepicker({
format: 'mm/dd/yyyy',
});
});

Bootstrap 3 DateTimePicker in EditorTemplate

Created an Editor Template to dynamically create time slots. Now I am unable to select the time with datetimepicker. Code below. The following code works when apart of the main view. Is it possible to use datetimepicker in an editortemplate?
#model Testing.Models.TimeSlot
<div class="form-group row">
#Html.LabelFor(model => model.StartTime, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-2">
#Html.EditorFor(model => model.StartTime, new { htmlAttributes = new { #Value = DateTime.Now.ToString("hh:mm tt"), #class = "form-control", #style = "width: 100px"} })
#Html.ValidationMessageFor(model => model.StartTime, "", new { #class = "text-danger" })
</div>
#Html.LabelFor(model => model.EndTime, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-2">
#Html.EditorFor(model => model.EndTime, new { htmlAttributes = new { #Value = DateTime.Now.AddMinutes(15).ToString("hh:mm tt"), #class = "form-control", #style = "width: 100px" } })
#Html.ValidationMessageFor(model => model.EndTime, "", new { #class = "text-danger" })
</div>
</div>
#section Scripts
{
<script type="text/javascript">
$(function () {
$('#StartTime').datetimepicker({
format: 'LT',
showClose: true,
showClear: true,
toolbarPlacement: 'top',
stepping: 15,
});
});
$(function () {
$('#EndTime').datetimepicker({
format: 'LT',
showClose: true,
showClear: true,
toolbarPlacement: 'top',
stepping: 15
});
});
$('#StartTime').removeAttr("data-val-date");
$('#EndTime').removeAttr("data-val-date");
</script>

Sections are not supported in partials, and your scripts are never included in the html returned to the client. In any case, scripts should never be in partials (which is what an EditorTemplate is) - you are generating inline scripts, making it harder to debug and risk including multiple instances of the scripts.
Delete the #section Scripts{ ... } code from your EditorTemplate and move it to the main view or its layout. To make this a bit more flexible, I recommend you give the inputs a class name, and use that as a jQuery selector, rather that referring to each individual id (and therefore only one script is required).
In addition, you should never set the value attribute when using the HtmlHelper methods. The methods correctly generate the value from ModelState, ViewData and finally the model property in that order, and by setting the value attribute, you are screwing up model binding. Instead, set the values in the GET method before you pass the model to the view.
Your code to generate the datepicker should be just
#Html.EditorFor(m => m.StartTime, new { htmlAttributes = new { #class = "form-control datetimepicker" } })
or more simply
#Html.TextBoxFor(m => m.StartTime, new { #class = "form-control datetimepicker" })
and you can then style the width
.datetimepicker {
width: 100px;
}
and the the script in the view or layout will be just
$('.datetimepicker').datetimepicker({
format: 'LT',
showClose: true,
showClear: true,
toolbarPlacement: 'top',
stepping: 15,
});
Its also not clear why you want to attempt to remove client side validation using .removeAttr("data-val-date"), and doing so suggests a problem with your design. It also appears that you want to select a time only, in which case your property should be TimeSpan.

using jQuery UI Datepicker in MVC razor getting error

I am following this example to use jQuery UI Datepicker in my MVC project.
Model
[DataType(DataType.Date)]
public DateTime RequestDate { get; set; }
Razor
<div class="form-group">
#Html.LabelFor(model => model.RequestDate, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.RequestDate)
#Html.ValidationMessageFor(model => model.RequestDate, "", new { #class = "text-danger" })
</div>
Then as per tutorial created Date helper and pasted this line
#Html.TextBox("", String.Format("{0:d}", (string)Model.ToShortDateString()), new { #class = "datefield", #type = "date" })
When i run the application, i get run time exception for above line. Model is null. I am not sure why? and How does it bind to my model?
Additional information: Cannot perform runtime binding on a null
reference
DatePickerReady.js
if (!Modernizr.inputtypes.date) {
$(function () {
$(".datefield").datepicker();
});
}

I think your problem is caused by the casting part of (string)Model.ToShortDateString(), no need for the casting here as the ToShortDateString will return a string anyways. Try this instead:
#Html.TextBox("", String.Format("{0:d}", Model.ToShortDateString()),
new { #class = "datefield", #type = "date" })
And you need to make sure to name your editor template a name matching your data type (DateTime.cshtml in your case) or use the UIHint attribute if you like to customize the name, and make sure you add your template under the proper EditorTemplates folder.

Date Formats in MVC

My view models and controllers seem to save the date time in a different format. For instance, in my view in the HTML text box, if I had entered in 07/12/2015, it would have saved the value as if it is "December 7, 2015". I am using the Boostrap Javascript DateTime Picker. (a side note: if I entered in the "dateFormat" for the datetime picker, the picker would not work, and that's why I commented out that line)
Is there a way such that I can change the saved format of the HTML text box?
My view model: (part)
<div class="form-group">
#Html.Label("Actual Completion Date", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Actual_Completion_Date, new { htmlAttributes = new { #Value = Model.Actual_Completion_Date, #class = "form-control" } })
</div>
#Html.ValidationMessageFor(model => model.Actual_Completion_Date, "", new { #class = "text-danger" })
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Save" class="btn btn-default" />
</div>
</div>
</div>
}
#section scripts {
<script type="text/javascript">
$(function () {
$('#Actual_Completion_Date').datetimepicker({
//dateFormat: "dd/mm/yyyy",
defaultDate: '#Model.Actual_Completion_Date',
format: 'L',
showClose: true,
showClear: true,
toolbarPlacement: 'top',
});
$('#Actual_Completion_Date').datetimepicker({
defaultDate: '#Model.Actual_Completion_Date',
format: 'LT',
showClose: true,
showClear: true,
toolbarPlacement: 'top',
stepping: 15,
});
});
</script>
}
My model (part):
[DataType(DataType.Date)]
[DisplayFormat(DataFormatString = "{0:MM/dd/yyyy}", ApplyFormatInEditMode = true)]
public Nullable<System.DateTime> Date_Assigned { get; set; }
[DataType(DataType.Date)]
[DisplayFormat(DataFormatString = "{0:MM/dd/yyyy}", ApplyFormatInEditMode = true)]
public Nullable<System.DateTime> Actual_Completion_Date { get; set; }
Any advice or pointers? Many thanks in advance.

How datetime is parsed depends on the current language for posted values and values passed as querystring.
Values passed as part of the route are parsed using invariant culture. Check with f12 tools or Fiddler what kind of request you have.
If you want to change the behaviour you would change the curent culture for the thread (for posted values and querystrings) or register your own midelbinder (for route values)