Search code examples
javascriptjquerydatepickerfuelux

Fuelux datepicker how do I initialise it?

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/

Solution

  • it looks like the markup is more important

    check out this FIDDLE

    also you should add 

    fuelux

    class to the div which has datepicker.