Hi Ive put in a bootstrap date picker on my asp.net mvc form.
Ive set it up so it starts displaying years from a decade.
But the date picker only displays the years as one longer string, its functional though
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
#Scripts.Render("~/bundles/bootstrap")
<script type="text/javascript">
$("#DateOfBirth").datepicker({
format: "dd/mm/yyyy",
startDate: "-120y",
endDate: "-10y",
startView: 2,
calendarWeeks: true,
defaultViewDate: { year: 1975, month: 01, day: 01 }
});
</script>
}
Helper in view
<div class="row">
<div class="col-md-3 col-md-offset-1">
#Html.LabelFor(model => model.DateOfBirth, htmlAttributes: new { #class = "control-label" })
#Html.EditorFor(model => model.DateOfBirth, new { htmlAttributes = new { #class = "form-control", placeholder = "01/12/80" } })
#Html.ValidationMessageFor(model => model.DateOfBirth, "", new { #class = "text-danger" })
</div>
</div>
Thanks
What it should look like:
What it actually looks like:
As Jasen has pointed out i'd missed the css resource I'm the bundle config. Thanks
Related
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
I have implemented moment js for my datepicker in a MVC website but I cant get the default date to work. I just shows 1. january 2015. I want it to show todays date.
Model
public class TeamModel
{
public Team Team { get; set; }
}
Controller. I set my start and end date:
model.Team = new Team();
model.Team.StartDate = DateTime.Today;
model.Team.EndDate = DateTime.Now.AddDays(30);
In my View I have the js:
<script type="text/javascript">
$(function () {
moment.lang('da');
$('#Team_StartDate').datetimepicker({
locale: 'da',
format: 'D-MMMM-YYYY',
showClose: true,
showClear: true,
toolbarPlacement: 'top'
});
$('#Team_EndDate').datetimepicker({
locale: 'da',
format: 'D-MMMM-YYYY',
showClose: true,
showClear: true,
toolbarPlacement: 'top'
});
});
</script>
and the editorfor
<div class="form-group">
#Html.LabelFor(model => model.Team.StartDate, htmlAttributes:
new { #class = "control-label col-md-2" })
<div>
#Html.EditorFor(model => model.Team.StartDate, new {
#Value = Model.Team.StartDate.ToString(), htmlAttributes =
new { #class = "form-control" } })
#Html.ValidationMessageFor(model =>
model.Team.StartDate, "", new { #class = "text-danger" })
</div>
</div>
But the date displayed in StartDate is "1-januar-2015" and "31-januar-2015" in EndDate.
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
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 :)