Fuelux datepicker how do I initialise it?

Question

I'm trying to use the fuelux datepicker and can't seem to even initialise it properly! Any help would be most appreciated. I've based it on the examples here: https://gist.github.com/vernak2539/9980566

Header of page:

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link href="//www.fuelcdn.com/fuelux/3.4.0/css/fuelux.min.css" rel="stylesheet">

HTML:

<div class="fuelux">
  <div class="datepicker dropdown" id="myDatepicker">
    <div class="input-append">
        <div class="dropdown-menu"></div>
        <input type="text" class="span2" value="" data-toggle="dropdown">
        <button type="button" class="btn" data-toggle="dropdown">
        <i class="icon-calendar"></i></button>
    </div>
</div>

Before my JS:

<!-- jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//www.fuelcdn.com/fuelux/3.4.0/js/fuelux.min.js"></script>

JS:

$(document).ready(function(){
  $('#myDatepicker').datepicker();
});

Also tried in a fiddle and thought it would be sufficient but it isn't working: http://jsfiddle.net/z2rpos9g/

Answer 1

it looks like the markup is more important

check out this FIDDLE

also you should add

fuelux

class to the div which has datepicker.