HTML 5 datepicker in twitter bootstrap dropdown

Question

I'm trying to insert an HTML 5 datepicker into a twitter bootstrap dropdown but it won't load the calendar from inside the dropdown menu. Here's a basic example.

HTML

<div class="btn-group">
    <a href="#" data-toggle="dropdown">Pick a Date</a>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
        <li><a href="#" value="Today">Today</a></li>
        <li><a href="#" value="Tomorrow">Tomorrow</a></li>
        <li><a href="#" value="Next Week">Next Week</a></li>
        <li><a href="#" class="datepicker" value="Nov 30">Select a Date</a></li>
    </ul>
</div>

JQuery

$('.datepicker').click(function(e) {
    e.stopPropagation();
    $(this).html('<input type="date" value="2011-01-13"/>');     
});

See How I implemented it here http://stackoverflow.com/questions/27687644/jquery-datepicker-on-asp-net/27687884#27687884 — agentpx, Dec 30 '14 at 00:42
@agentpx it looks like you're using another open source datepicker. I was hoping to stick to the native html5 one but I might use that if I can't get this to work. — Ryan Grush, Dec 30 '14 at 00:55
Ok, the error is in your HTML. Date picker is supposed to be bind in input/text element not anchor tags. Hope that helps. — agentpx, Dec 30 '14 at 00:59
Thats perfect, thanks. Here's the fiddle incase anyone needs it http://jsfiddle.net/g2edt5se/1/ — Ryan Grush, Dec 30 '14 at 01:22

HTML 5 datepicker in twitter bootstrap dropdown

0 Answers0