mvc bootstrap datepicker with editor template not working

1
votes

I try to use implement bootstrap v3 datetimepicker in my mvc project but its not working. below is my editor templates.

@model DateTime?
@Html.TextBox("", Model.HasValue ? Model.Value.ToString("d") : String.Empty) 

$(function() {
    // target only the input in this editor template
    $('#datepicker').datetimepicker();
}); </script>

i had inculded bootstrap datetimepicker script on my _layout.chtml but seem like it cant function

<script src="~/Scripts/bootstrap-datetimepicker.js"></script>
<script src="~/Scripts/bootstrap-datetimepicker.min.js"></script>

this is my view

@Html.LabelFor(model => model.EndDate, new { @class = "control-label col-md-2" }) @Html.EditorFor(model => model.EndDate)

            @Html.ValidationMessageFor(model => model.EndDate)
        </div>
    </div>

It only come out as normal datetimepicker if i set it as

    [DataType(DataType.Date)]
    public DateTime EndDate { get; set; }
3
jqueryasp.net-mvctwitter-bootstrap
Why are you including both the min and non-min version? That's wrong. – Erik Funkenbusch
@Html.EditorFor(model => model.EndDate) generates an textbox with id="EndDate". Your script is targeting an element with id="datepicker" – user3559349

3 Answers

0
votes
  1. You do not have to include both min.js and .js Remove one.

  2. Add ~/Content/bootstrap-datepicker.css for CSS

    @Html.LabelFor(model => model.EndDate)
@Html.TextBoxFor(model => model.EndDate, new { @class = "form-control datepicker", placeholder = "Palce holder of your choice" })
@Html.ValidationMessageFor(model => model.EndDate)

Rest of the code will work on once u initialize it 

$(function() {
  // target only the input in this editor template
  $('#datepicker').datetimepicker();
});
0
votes

there are many bootstrap datetimepickers to date. so, you have to specify the correct datetimepicker you're using. if its this - http://eonasdan.github.io/bootstrap-datetimepicker/

then, include

  • include moment.js file - http://momentjs.com/downloads/moment.js
  • get rid of one of the datetimepicker javascript files (either ~/Scripts/bootstrap-datetimepicker.js or ~/Scripts/bootstrap-datetimepicker.min.js)
  • include datetimepicker css file.

  • add this script in your view file.

    $(function() {$('#ID_of_the_Input').datetimepicker();});

0
votes

Use

$(function() {
    // target only the input in this editor template
    $('#EndDate').datetimepicker();
});