datebox css not working with backbone.js

My issue is that the datebox CSS is not being loaded. In my main.js file i have following code:

var mainRouter;

 require.config({
  paths: {
    text: 'libs/require/text',
    underscore: 'libs/underscore/underscore-min',
    jquery: 'libs/jquery/jquery-1.11.1.min',
    //jqueryUI:'libs/jqueryUI/jquery-ui-1.10.4.custom.min',
    backbone: 'libs/backbone/backbone-min',
    jqueryKnob:'libs/jqueryKnob/jquery.knob',
    jqueryMobile:'libs/jqueryMobile/jquery.mobile-1.4.2.min',
    dateBoxCore:'libs/jqm-datebox-1.1.0.core',
    dateBox:'libs/jqm-datebox-1.1.0.mode.datebox',
    dateBoxi18n:'libs/jquery.mobile.datebox.i18n.en_US.utf8',
    dateBox1:'libs/jqm-datebox.mode.calbox.min',
    dialog:'libs/jquery.mobile.simpledialog.min'

},
shim: {
    underscore: {
        exports: "_"
    },
    backbone: {
        deps: ["underscore", "jquery"],
        exports: "Backbone"
    },

    jqueryMobile:{
        deps:["jquery"]
    },
    dateBoxCore:{
        deps:["jqueryMobile"]
    },
     dateBox:{
        deps:["jquery","dateBoxCore"]
    },
    dateBoxi18n:{
        deps:["jquery","dateBox"]
    },
    dateBox1:{
        deps:["jquery","jqueryMobile","dateBox"]
    },
    jqueryKnob:{
        deps:["jquery"]
    },
    tmpl: {
        exports: "tmpl"
    },
    dialog:{
        deps:["jquery","jqueryMobile"]
    }
},
catchError: {
    define: true
},
waitSeconds: 0
 });

require(['app/errorhandler'], function(handler) {
console.log('error handler loaded');
require.onError = handler;
});

 require(['jquery', 'backbone', 'controllers/router','jqueryMobile','jqueryKnob','dateBoxCore','dateBox','dateBoxi18n','dateBox1','dialog'], function($, Backbone, router) {

function onReady() {
    mainRouter = new router();
    // Tells Backbone to start watching for hashchange events
    Backbone.history.start();
}
onReady();
  });

My index.html file is below.

<head>
    <link rel="stylesheet" href="css/jquery.mobile-1.4.2.min.css"/>
    <link rel="stylesheet" href="css/jqm-datebox.css"/>
    <link rel="stylesheet" href="css/demos.css"/>
    <link rel="stylesheet" href="css/jquery.mobile.datebox.css"/>
    <link rel="stylesheet" href="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog.min.css"/>
</head>
<body>
    <div data-role="page" id="droIndex"> 
    <div data-role="header" data-position="fixed"> 
        <h1>jQueryMobile - DateBox</h1>

    </div>
    <div data-role="content">
        <div class="content-secondary"> 
            <div id="jqm-homeheader"> 

                <p>A Date and Time Picker plugin for jQueryMobile</p> 
            </div> 

            <div class="modedemos sidebar"></div>
        </div>

        <div class="content-primary"> 
            <div data-role="collapsible-set" data-mini="true">

                <div data-role="collapsible" data-collapsed="false">
                    <h2>Android Default</h2>
                    <p>Using the android mode is as simple as setting the 'mode' option to "datebox".</p>

                    <div data-role="fieldcontain">
                        <label for="defandroid">Some Date</label><input name="defandroid" type="date" data-options='{"mode":"datebox"}' data-role="datebox" id="defandroid" />
                    </div>

                    <pre class="prettyprint">&lt;label for="mydate"&gt;Some Date&lt;/label&gt;

&lt;input name="mydate" id="mydate" type="date" data-role="datebox"
   data-options='{"mode": "datebox"}'&gt;</pre>

                </div>
                <div data-role="collapsible">
                    <h2>Credit Cards</h2>
                    <p>Credit Card expiration dates can be gathered by setting 'overrideDateFormat' to "%m/%Y" and 'overrideDateFieldOrder' to ["m", "y"]</p>

                    <div data-role="fieldcontain">
                        <label for="droidcard">Expires</label><input name="droidcard" type="date" data-role="datebox" data-options='{"mode":"datebox", "overrideDateFormat": "%m/%Y", "overrideDateFieldOrder": ["m", "y"]}' id="droidcard" />
                    </div>

                    <pre class="prettyprint">&lt;label for="mydate"&gt;Some Date&lt;/label&gt;

&lt;input name="mydate" id="mydate" type="date" data-role="datebox"
   data-options='{"mode":"datebox", "overrideDateFormat": "%m/%Y", "overrideDateFieldOrder": ["m", "y"]}'}'&gt;</pre>

                </div>
                <div data-role="collapsible">
                    <h2>Theme Options</h2>
                    <ul data-role="listview" data-inset="true">
                        <li><h3>themeButton</h3><p>Theme swatch for +/- Buttons</p></li>
                        <li><h3>themeInput</h3><p>Theme swatch for input elements</p></li>
                    </ul>
                </div>
            </div>
        </div> 

    </div>
    <div data-role="footer" data-position="fixed">
    </div>
</div>
</body>

The datepicker is opening, but the css files are not loaded, so the android like datepicker is not opening. How can I remedy this?

zbgec

jtsage / jtsage-datebox

datebox css not working with backbone.js #317