I am a beginner to the mvc concept, I am trying to implement a datepicker in my mvc project, which steps are still missing ?
<div class="form-group">
#Html.LabelFor(model => model.Date, new { #class = "control-label col-md-2" })
<div class="col-md-10 date-picker">
#Html.EditorFor(model => model.Date, "", new { #class = "date-picker" })
#Html.ValidationMessageFor(model => model.Date)
</div>
</div>
I have used Nuget to install gridmvc datepicker. I have also put in the _layout.cshtml :
<script type="text/javascript">
$(function () {
// This will make every element with the class "date-picker" into a DatePicker element
$('.date-picker').datepicker();
})
</script>
until now - I get only textbox and not calender
Related
I have this "little" problem.
I have created a project MVC, where I need to register a user, with different field. (I will show you only a part.)
One particular field, is giving me an issue:
On the field DateOfBirth, where I have implemented a datepicker on jquery
When I click on my EditorFor label:
I got at first all the old data I taped before, and my calendar is behind, so i can't select the date:
Is there a way to make disappear the cache and have only the calendar?
#model WebApplication2.Models.Person
#{
ViewBag.Title = "Create";
}
<h2>Create</h2>
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>Person</h4>
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group">
#Html.LabelFor(model => model.FirstName, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.FirstName, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.FirstName, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.LastName, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.LastName, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.LastName, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.DateOfBirth, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.DateOfBirth, new { htmlAttributes = new { #class = "datepicker form-control" } })
#Html.ValidationMessageFor(model => model.DateOfBirth, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</div>
</div>
}
<div>
#Html.ActionLink("Back to List", "ListPerson")
</div>
<link href="~/Content/themes/base/jquery-ui.min.css" rel="stylesheet" />
#section Scripts {
<script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>
#Scripts.Render("~/bundles/jqueryval")
<script>
$(function() {
$(".datepicker").datepicker(
{
dateFormat: "yy/mm/dd",
changeMonth: true,
changeYear : true
});
});
</script>
}
At first I thought it was just the cache of a browser, and I tested with many (IE11, Mozilla, Chrome), and I cleaned cache, but it seem that is storing the date on the application cache.
Do you know what it could be the reason?
Kind regards.
Try adding the autocomplete="off" attribute – Stephen Muecke
#Html.EditorFor(model => model.DateOfBirth, new { htmlAttributes = new { #class = "form-control", autocomplete = "off" } })
And it works :)
This the html page that not work the problem with NewspostedDate
<div class="form-group">
#Html.LabelFor(model => model.NewsPostedDate, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.NewsPostedDate, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.NewsPostedDate, "", new { #class = "text-danger" })
</div>
</div>
instead of Editorfor you can use TextBoxfor.
try this
#Html.TextBoxFor(m => m.NewsPostedDate, new { #class = "form-control date-picker" })
$('.date-picker').datepicker({ format: "yyyy/mm/dd", autoclose: true })
Note:
Good approach first load you css file , then load javascript/jquery . because user first see you UI , then interact with your UI
Looks like your Editorfor is missing the class "NewsPostedDate" or perhaps you mean to refer directly to the element so it should be:
jQuery('#NewsPostedDate').datetimepicker({ format: 'DD/MM/YYYY' });
Note the # instead of the .
I am working on MVC application. Trying to the add the months to Kendo MVC Datetimepicker control based on the change event of text box control.
When the user enters the months in the Contract Duration field it should add Priority Date time control.
Could somebody advice how it can be done.
Contract Duration in Months
<div class="form-group">
#Html.LabelFor(model => model.ContractDurationInMonths, htmlAttributes: new { #class = "control-label col-md-4" })
<div class="col-md-8">
#Html.EditorFor(model => model.ContractDurationInMonths, new { htmlAttributes = new { #class = "form-control", style = "width:100%" } })
#Html.ValidationMessageFor(model => model.ContractDurationInMonths, "", new { #class = "text-danger" })
</div>
</div>
Priority Datetime control
<div class="form-group">
#Html.LabelFor(model => model.Priority, htmlAttributes: new { #class = "control-label col-md-4" })
<div class="col-md-8">
#*#Html.EditorFor(model => model.Priority, new { htmlAttributes = new { #class = "form-control" } })*#
#(Html.Kendo().DatePickerFor(model => model.Priority)
.Name("Priority")
.Value("10/10/2011")
.HtmlAttributes(new { style = "width: 100%" })
)
#Html.ValidationMessageFor(model => model.Priority, "", new { #class = "text-danger" })
</div>
</div>
Basically, set the blur() event on your textbox then update the value of datepicker:
<script>
$(document).ready(function() {
$("#ContractDurationInMonths").blur(function () {
var date = $("#Priority").data("kendoDatePicker").value();
var newMonth = date.getMonth() + kendo.parseInt($("#ContractDurationInMonths").val());
date.setMonth(newMonth);
$("#Priority").data("kendoDatePicker").value(date);
});
});
</script>
Here is an example in js: http://dojo.telerik.com/#sg53719/eseRo
Using scaffolded items in an MVC5 application, I see things like text fields given the CSS class "form-control". The fields all have consistent rounded corners, same font color/size etc.
Now I've added a dropdown list using "#Html.DropdownListFor" and it's square, with a different font colour.
I know I can specify which CSS class to use in the Razor e.g.
#Html.DropDownListFor(model => model.OrderItemTypeId, (SelectList)ViewBag.OrderItemTypes, new { htmlAttributes = new { #class = "###########" } })
But I don't know what to replace ########### with. If I specify "form-control" just gives me the square box I described above. "form-control select" doesn't seem to do much either.
Here's a bigger snippet showing a well-styled text field directly above it
<div class="form-group">
#Html.LabelFor(model => model.Title, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Title, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Title, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.OrderItemTypeId, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownListFor(model => model.OrderItemTypeId, (SelectList)ViewBag.OrderItemTypes, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.OrderItemType, "", new { #class = "text-danger" })
</div>
</div>
Is there a value I can use that will give my dropdown the same appearance as all the other text fields I already have?
Thanks
The third parameter already is the htmlAttributes field, so your syntax is wrong. This is what you're after:
#Html.DropDownListFor(model => model.OrderItemTypeId,
(SelectList)ViewBag.OrderItemTypes,
new { #class = "form-control etc" })
See Microsoft Docs.
You need to make sure it sits within proper hierarchy of outer tags with their corresponding classes.
See the code below that I took from this article - How to use Bootstrap 3 validation states with ASP.NET MVC Forms
<div class="row">
<div class="col-sm-4 col-sm-offset-4">
<div class="panel panel-default">
<div class="panel-body">
#using (Html.BeginForm("UserProfile", "Profile", FormMethod.Post, new { role = "form", id="userForm" })) {
#* State selection dropdown *#
<div class="form-group">
#Html.LabelFor(m => m.State)
#Html.DropDownListFor(m => m.State, // Store selected value in Model.State
// This argument needs some explanation - here we take a Distionary<string, string>
// and turn it into an instance of SelectList, see blog post for more details
new SelectList(Model.States, "Key", "Value"),
// Text for the first 'default' option
"- Please select your state -",
// A class name to put on the "<select>"
new { #class = "form-control" }
)
#Html.ValidationMessageFor(m => m.State)
</div>
<button type="submit" class="btn btn-primary">Update</button>
}
</div>
</div>
</div>
</div>
I saw lot of post regarding this but not able to solve.
In my view the bootstrap datepicker is popping out successfully for the input tag
eg:
<input class="span2 datepicker" size="16" type="text" value="12-02-2012">
When i run the page iam able to change the date through datepicker.
$(document).ready(function () {
$('.datepicker').datepicker();
});
but the same is not working with below code
<div class="control-group">#Html.LabelFor(model => model.dob, htmlAttributes: new { #class = "control-label " })
<div class="controls">
#Html.EditorFor(model => model.dob, new { htmlAttributes = new {#class = "datepicker" } })
#Html.ValidationMessageFor(model => model.dob, "", new { #class = "field-validation-error text-danger" })
</div>
</div>
Please help me.
It is sorted out.
<div class="control-group">#Html.LabelFor(model => model.dob, htmlAttributes: new { #class = "control-label " })
<div class="controls">
#Html.EditorFor(model => model.dob, new {#class = "datepicker" } })
#Html.ValidationMessageFor(model => model.dob, "", new { #class = "field-validation-error text-danger" })
</div>
</div>
I removed new { htmlAttributes = from the Editorfor
and its working fine :)