CODEWITHSUNDEEP
twitter-bootstraprequirejs
chhenning
chhenning

Reputation: 2077

requirejs and bootstrap-datetimepicker

I have a problem when I try to set the format with date time picker. The debugger tells me that 

Uncaught TypeError: $(...).datetimepicker is not a function

The HTML is:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

    <meta charset="utf-8" />
    <title>Web Project</title>

    <link href="Styles/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="Styles/bootstrap-datetimepicker.min.css" rel="stylesheet" type="text/css" />
    <link href="Styles/simple-sidebar.css" rel="stylesheet" type="text/css" />

    <script data-main="Scripts/app.js" src="Scripts/Libs/require.js"></script>

    <meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>


    <div class="container">
        <div class="row">
            <div class='col-sm-6'>
                <div class="form-group">
                    <div class='input-group date' id='datetimepicker1'>
                        <input type='text' class="form-control" />
                        <span class="input-group-addon">
                            <span class="glyphicon glyphicon-calendar"></span>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>

The main html sets up and loads requirejs which itself is loading my app.js. In there I'll try to set the date picker format when the document is ready. Please see below.

requirejs.config({

    // by default load any module IDs from Scripts/libs
    baseUrl: 'Scripts/Libs',

    paths: {
        models: '../models',
        collections: '../collections',
        views: '../views',
        routers: '../routers',
        components: '../components',
        modelDialog: 'backbone.ModalDialog',
        bootstrap: 'bootstrap.min',
        boostrapDatePicker: 'bootstrap-datetimepicker.min',
    },

    shim: {
        'backbone': {
            deps: ['underscore', 'jquery'],
            exports: 'Backbone'
        },
        'underscore': {
            exports: '_'
        },
        'bootstrap': {
            deps: ['jquery']
        },
        'boostrapDatePicker': {
            deps: ['moment', 'jquery', 'bootstrap']
        }

    }

});

var app = app || {};

require(['components/dataService'], function(dataService) {

    $("#menu-toggle").click(function(e) {
        e.preventDefault();
        $("#wrapper").toggleClass("toggled");
    });

    $(document).ready(function() {

        $('#datetimepicker1').datetimepicker({ format:'MM/DD/YYYY'});

        dataService.getData();

    });

});

Upvotes: 1

Views: 3266

Answers (2)

tonyMcMister
tonyMcMister

Reputation: 27

I think the issue may be that you are getting

Uncaught TypeError: $(...).datetimepicker is not a function

returned because datetimepicker is possibly not getting imported/loaded correctly or you could possibly be missing a dependancy.

Upvotes: -2

asgoth
asgoth

Reputation: 35829

You need to add 'jquery' and 'boostrapDatePicker' to your require array:

require(['components/dataService', 'jquery', 'boostrapDatePicker'], function(dataService, $) {
  ...

Upvotes: 3

Related Questions