Kendo Ui: DateTimePicker not showing icons to select date and time

Question

I am trying to have a date time picker in my view. This is what I have done

@{
    ViewBag.Title = "CreateAppointment_SetDate";
    Layout = "~/Views/Shared/_Layout.cshtml";
    @Styles.Render("~/Content/Kendo/css")

}


@Html.HiddenFor(m=>m.AppointmentId)
<h3>When should appointment take place?</h3>
<h4>Please select the date range for the appointment to take place between</h4>
<h6>Please select a start date</h6>

<div class="col-md-10">
    @(Html.Kendo().DateTimePicker().Name("dateTimePicker").Value(DateTime.Now))


</div>


@Scripts.Render("~/Scripts/Kendo/jquery.min.js")
@Scripts.Render("~/bundles/Kendo")

and the bundles

        bundles.Add(new StyleBundle("~/Content/Kendo/css").Include(
        "~/Content/kendo/kendo.common.min.css",
        "~/Content/kendo/kendo.default.min.css",
        "~/Content/kendo/kendo.bootstrap.min.css"));
        bundles.Add(new ScriptBundle("~/bundles/Kendo").Include(
        "~/Scripts/Kendo/kendo.all.min.js",
        "~/Scripts/Kendo/kendo.aspnetmvc.min.js"));

and this is what I get in view, no icons to pick date and time.

Any idea what I should do to make it work?

Answer 1

There is a JavaScript error in your page because the JavaScript files are included after using the datepicker. You can either:

• Move @Scripts.Render before using the datepicker

  @Scripts.Render("~/Scripts/Kendo/jquery.min.js")
  @Scripts.Render("~/bundles/Kendo")
  <div class="col-md-10">
     @(Html.Kendo().DateTimePicker().Name("dateTimePicker")
           .Value(DateTime.Now))
  </div>
  

• Use deferred initialization