CODEWITHSUNDEEP
jqueryasp.net-mvctwitter-bootstrap
WengKit
WengKit

Reputation: 21

mvc bootstrap datepicker with editor template not working

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

Upvotes: 1

Views: 2731

Answers (3)

Mike
Mike

Reputation: 11

Use

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

Upvotes: 0

sanjith edward
sanjith edward

Reputation: 358

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

Upvotes: 0

Dnyanesh
Dnyanesh

Reputation: 2343

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

Upvotes: 0

Related Questions