Search code examples
asp.net-mvctwitter-bootstraplessdatetimepicker

How to add bootstrap less css files?

I'm trying to include a date time picker from this site and I'm pretty far with the implementation.

The dependancies for this library are 2 less files mentioned on the site too (dropdowns.less and sprites.less). I've installed the bootstrap.less via NuGet package manager which includes those files.

But I got stuck with adding those less files in the header of the _layout page. I simply tried:

link href="@Url.Content("~/Content/bootstrap/less/dropdowns.less")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/bootstrap/less/sprites.less")" rel="stylesheet" type="text/css" />

Here is a screenie of how it looks like as soon as you select a date. After selecting a date, you get the option of selecting the time:

messed up

And this is how it should look like:

day view

I have also added the javascript files that came along with the bootstrap.less:

// Bootstrap 3 script bundle
bundles.Add(new ScriptBundle("~/bundle/scripts/bootstrap_js").Include(
            "~/Content/bootstrap/js/bootstrap-transition.js",
            "~/Content/bootstrap/js/bootstrap-alert.js",
            "~/Content/bootstrap/js/bootstrap-button.js",
            "~/Content/bootstrap/js/bootstrap-carousel.js",
            "~/Content/bootstrap/js/bootstrap-collapse.js",
            "~/Content/bootstrap/js/bootstrap-dropdown.js",
            "~/Content/bootstrap/js/bootstrap-modal.js",
            "~/Content/bootstrap/js/bootstrap-tooltip.js",
            "~/Content/bootstrap/js/bootstrap-popover.js",
            "~/Content/bootstrap/js/bootstrap-scrollspy.js",
            "~/Content/bootstrap/js/bootstrap-tab.js",
            "~/Content/bootstrap/js/bootstrap-typeahead.js",
            "~/Content/bootstrap/js/bootstrap-affix.js"));

Anyone formiliar with this library that could point me into the right direction for this to work?

EDIT I able to fix the messed up calendar. But now i'm presented with a trail after the datetimepicker is closed. Any idea on how to remove this?

trail

Solution

  • Those .less files just describe the style, not the functionality, you also have to include the

    @Scripts.Render("~/bundle/scripts/bootstrap_js")

    in your _Layout to pull in the .js files..

    ~hope that helps

    (and you put that bundles.Add(...); in your BundleConfig.cs, right?)

    Although, the more that I look at it, it's looking to me like you may have it setup right but that you may have a problem with your date/time data?