5

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/

haakym
  • 12,050
  • 12
  • 70
  • 98

1 Answers1

6

it looks like the markup is more important

check out this FIDDLE

also you should add 

fuelux

class to the div which has datepicker.

Cerlin
  • 6,622
  • 1
  • 20
  • 28
  • thanks so much for your reply. Regarding the markup - this is what I can't understand, do I really need to add all the markup for each datepicker on the page?! Look at this fiddle that shows a date picker for a previous version, no markup in sight! http://jsfiddle.net/Cg93W/3/ Also, I can't see why I'd need to add fuelux to both the div with the date picker and the outer div also - if that's what you're suggesting. I'll give it a shot though. Thanks again! – haakym Dec 15 '14 at 11:20
  • 1
    We switched to a markup declarative architecture in line with Bootstrap 3. This allows for a simpler API, easier internationalization among other things. Feeding a markup template into each control and making architecture closer to pseudo-web-components may be on the roadmap. We recognize there are problems with copying & pasting lots of markup, etc. The .fuelux wrapper class is present, so you can have non-fuelux datepicker classes. – Interactive Llama Dec 15 '14 at 14:59
  • 1
    Many thanks for your replies. It could just be me rushing through the docs, but it didn't seem immediately obvious that I needed to add the markup. – haakym Dec 15 '14 at 15:15