Hi I am new to MVC and I have an input box where a user must enter a date. For some reason my date time picker is not displaying and I have to manually type in the date. I have declared all script files in my layout page. Am I missing something?
This is my display
This is my code for my view
<div class="form-group">
#Html.LabelFor(model => model.order_preffered_date, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.order_preffered_date, new { htmlAttributes = new { #class = "form-control datepicker" } })
#Html.ValidationMessageFor(model => model.order_preffered_date, "", new { #class = "text-danger" })
</div>
</div>
I'm assuming you have an editor template set up for whatever type model.order_preffered_date is (DateTime probably) - Views/Shared/EditorTemplates/DateTime.cshtml - that contains your datepicker markup?
(BTW it's 'preferred', not 'preffered' - sorry to be pedantic but Thrupps will thank you :) )
Follow-up: If you don't want to use a specific editor template of your own, then ensure it's removed (so the default is used) and then the following checklist should sort you out:
Bootstrap datepicker CSS & JS file declared on the page (you've already mentioned you've done this - I assume jQuery is already present)
The datepicker element is initialised in the document.ready function somewhere, e.g.
$(function() {
...
$('.datepicker').datepicker();
...
});
If this is still not helping, then ensure your model property is decorated appropriately with DataType:
[DataType(DataType.Date)]
public DateTime order_preffered_date {get;set;}
Related
We are developing an ASP.NET MVC web application that uses Bootstrap's datetimepicker on the front end for selections. We need to provide support for the latest version of all major browsers.
Chrome requires that dates be formatted as 'yyyy-MM-dd' to resolve errors such as the following:
The specified value "11/18/2016 00:00:00" does not conform to the
required format, "yyyy-MM-dd".
This causes a problem since the format option works correctly (i.e. user can click the date and have it set in the input box) when the following code is used:
$('.datetimepicker').datetimepicker({
format: 'YYYY-MM-DD',
showTodayButton: true,
showClose: true
});
However, this code causes Firefox and IE to not make use of the value attribute that is set:
<div class="form-group">
#Html.LabelFor(model => model.StartDate, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.StartDate, new { htmlAttributes = new { #class = "form-control datetimepicker", type = "date", #Value = Model.StartDate } })
#Html.ValidationMessageFor(model => model.StartDate, "", new { #class = "text-danger" })
</div>
</div>
Removing format: 'YYYY-MM-DD' causes Firefox and IE to work correctly at the expense of Chrome no longer working. Is there a way to set the format in a browser specific way?
Not the most elegant solution in the world, but since we need to know the browser for other things, we are setting flags on the server side based upon the Request.UserAgent and then using those flags client side:
Server C#
ViewBag.Chrome = userAgent.Contains("Chrome");
Client JavaScript
$('.datetimepicker').datetimepicker({
showTodayButton: true,
showClose: true,
#if (ViewBag.Chrome)
{
<text>format: 'YYYY-MM-DD'</text>
}
});
I'm having an issue where my kendo datetimerpicker is rendering differently between when I run on my local machine and when the webpage has been published
Script:
<script>
$(document).ready(function () {
$("#datetimepicker").kendoDateTimePicker({
animation: {
close: {
effects: "faceOut zoom:out",
duration: 300
},
open: {
effects: "faceIn zoom:in",
duration: 300
}
}
});
});
HTML:
<div class="form-group">
#Html.LabelFor(model => model.Highwatermark, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Highwatermark, new { htmlAttributes = new { #class = "form-control", #id = "datetimepicker" } })
#Html.ValidationMessageFor(model => model.Highwatermark, "", new { #class = "text-danger" })
</div>
</div>
Running on local machine:
Published:
It still works if I click where the calendar and clock should be but I'm not sure why the images aren't showing up.
I'm also not sure why the datetimepicker is stretching so far over in both cases.
The form-control CSS class is related to the expanding:
http://docs.telerik.com/kendo-ui/third-party/using-kendo-with-twitter-bootstrap#use-form-control-bootstrap-css-class
You can restore the standard DateTimePicker width of 15em with a custom CSS rule:
.k-datetimepicker.form-control {
width: 15em;
}
If you need only some DateTimePickers to maintain their default width, apply another custom CSS class in htmlAttributes in addition to form-control and use it in the CSS selector:
.k-datetimepicker.form-control.my-no-expand {
width: 15em;
}
Assuming that the main theme images (sprite.png and sprite_2x.png) do exist on the production server, then the problem with the missing icons can be caused by the CSS bundling configuration:
http://docs.telerik.com/kendo-ui/aspnet-mvc/fundamentals#css-bundling
Check your kendo CSS files. Sometimes the relative addresses need modification to apply corrently. It is common issue. For example in css file you have something like:
background-image:url('Bootstrap/sprite.png')
which should change to
background-image:url('2015.3.930/Bootstrap/sprite.png')
I'm trying to incorporate a modal for a user creation menu that has 15 mandatory
sign up boxes that are displayed from the model to the UI using their model properties through the
#Html.LabelFor(model => model.Address2, htmlAttributes: new { #class = "control-label col-md-2" })
command. I want to add a mouse over modal to the fields so the user knows the field is mandatory to fill out before missing the field and getting the validation errors if the boxes are left empty. I want to use something like this but I don't know how to incorporate it into the #html label assignment.
address2
You just need to add the relevant data attributes needed to enable popover. The second parameter of LabelFor helper method accepts an annonymous object for the html attributes. Make sure you pass the data attributes there.
#Html.LabelFor(model => model.Address2, new { #class = "control-label col-md-2",
data_toggle = "popover",
data_placement = "left",
data_trigger = "hover",
title = "Address2 is mandatory" })
One thing to remember is, to build the markup for data attribute, you need to replace - with _ when passing the htmlAttributes to the helper method, that means, to get the output "data-toggle", you should pass "data_toggle"
Also make sure that you have enabled the popover functionality by calling the popover() method on the element(s)
$(function () {
$('[data-toggle="popover"]').popover()
});
<div class="form-group">
#Html.LabelFor(model => model.Address2, htmlAttributes: new {#class ="control-label col-md-2",
data_toogle= "popover",
data_placement = "right",
data_trigger = "hover",
title = "Address2 is mandatory"
})
<div class="col-md-10">
#Html.EditorFor(model => model.Address2)
#Html.ValidationMessageFor(model => model.Address2)
</div>
</div>
The above code is just displaying the control-label but it doesn't have the popover functionality. The script is the first script after the body and is exactly the way that was instructed.
I Have a dropdownlist that allows you to selcect an exsiting Driver ID. when the page loads the first Driver ID is already selected and I would rather allow the Driver ID dropdownlist to first have a null value selected when the page loads. How will I do this?
This is my Driver ID view:
<div class="form-group">
#Html.LabelFor(model => model.DriverID, "Driver Cell", new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownList("DriverID", null, htmlAttributes: new { #class = "box" })
#Html.ValidationMessageFor(model => model.DriverID)
</div>
</div>
You can use
#Html.DropDownList("DriverID", null, "Select a driver", htmlAttributes: new { #class = "box" })
but this dropdown will be empty since you are passing null as SelectList.
You can also use the asp-for tag helper with a SelectListItem list
Then this is what you write in your form in the view
<select asp-for="(Whatever the value is associated to)" asp-items="The List<SelectListItem> list">
<option disabled selected>---Select---</option>
<!-- This line will go to the top of the dropdown list -->
</select>
This will create a dropdown list where by default nothing is selected and this default value will be null
You can also refer to this other post on stack overflow:
Set Default/Null Value with Select TagHelper
I am working an asp.net mvc in visual studio 2013 and one of the fields is a date input but when clicking in the field and having focus in the field the automatic HTML5 datepicker does not come up. If I put the field in manually it comes up but then it doesn't map to that particular field. In the data annotations I have included [DataType(DataType.Date)] but this doesn't bring up the HTML5 date picker. How do I achieve this in asp.net below is the code for the field in particular
<div class="form-group">
#Html.LabelFor(model => model.CustomerJoinDate, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.CustomerJoinDate, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.CustomerJoinDate, "", new { #class = "text-danger" })
</div>
</div>
Can't remember exactly when this was added but in older versions of ASP.NET MVC you could either modify the default editor template to add support for it or use TextBoxFor which allows you to specify any custom attributes:
#Html.TextBoxFor(model => model.CustomerJoinDate, new {
#class = "form-control",
type = "date"
})
If you want your DateTime model properties to use the same template without having to repeat the same Razor code over and over, define a partial view called DateTime.cshtml (or DateTime.vbhtml) in your Shared/EditorTemplates folder, with content similar to:
#model DateTime
#Html.TextBoxFor(
m => m,
"{0:MM/dd/yyyy}",
new { #class = "form-control date", type = "date" })
Then replace your Razor bindings with:
#Html.EditorFor(model => model.CustomerJoinDate)
and so on, for each date field which should use this template.
This uses an overload of TextBoxFor that allows you to specify a format string for the input, which is helpful for "masking" the time portion of the DateTime value (assuming you only want to enter a date).
Since not every browser supports a native datepicker, you could use the date class in this example to apply a polyfill as necessary (or simply use type=date as your selector).
MVC 5.1 now supports using html attributes directly like so. You should be able to put date into the type attibute.
<div class="form-group">
#Html.LabelFor(model => model.CustomerJoinDate, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.CustomerJoinDate, new { htmlAttributes = new { #class = "form-control", type = "date" } })
#Html.ValidationMessageFor(model => model.CustomerJoinDate, "", new { #class = "text-danger" })
</div>
See Darin's answer regarding input type="date" via TextBoxFor
"...but when clicking in the field and having focus in the field the automatic HTML5 datepicker does not come up"
At the base level, not all browsers have "native" implementation of a "datepicker", so you'll likely need to implement a plugin to work across browsers (e.g. bootstrap datepicker and such)
Example:
<p>
See if you get a datepicker in Firefox (as of v40.0.2):
<br />
<input type="date" name="foo" />
</p>
Hth...