mvc bootstrap datepicker with editor template not working

Question

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; }

Why are you including both the min and non-min version? That's wrong. — Erik Funkenbusch
– Erik Funkenbusch, Commented Nov 14, 2014 at 2:53
@Html.EditorFor(model => model.EndDate) generates an textbox with id="EndDate". Your script is targeting an element with id="datepicker" — user3559349
– user3559349, Commented Nov 14, 2014 at 3:04

Dnyanesh · Accepted Answer · 2014-11-14 03:03:08Z

0

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

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();
});

answered Nov 14, 2014 at 3:03

Dnyanesh

2,3633 gold badges20 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

sanjith edward · Accepted Answer · 2014-11-24 05:06:23Z

0

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();});

edited Nov 24, 2014 at 5:06

answered Nov 19, 2014 at 9:04

sanjith edward

3584 silver badges12 bronze badges

Comments

hcoat · Accepted Answer · 2018-10-07 20:54:35Z

0

Use

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

edited Oct 7, 2018 at 20:54

hcoat

2,6431 gold badge25 silver badges30 bronze badges

answered Oct 7, 2018 at 15:22

Mike

113 bronze badges

Collectives™ on Stack Overflow

mvc bootstrap datepicker with editor template not working

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related