Date Picker in Custom Toolbar

ngungo

I have successfully installed buttons and a selector on the custom toolbar but have not been able to implement a date picker. I have tried many ways including hints from the forums but there is not one in the custom bar. Any hint would be appreciated. Thanks.

allan

Could you clarify what you mean but the custom toolbar? Can you link to a page showing what you have tried please.

Allan

ngungo

Hi Allan,
Thanks for the response.

Custom Toolbar

Link to my page

edit: I think I got something. I'll put final answer when totally worked out.

ngungo

It works half way now. It seems I need a css file or maybe I got wrong ID. Any hints would be appreciated. Link

PS. Sorry about the double post. I was clumsy.

var table = $('#tn2016').DataTable( {
    dom: 'B<"toolbar">frtip',
    // ...
});

$("div.toolbar").html(
    '<form id="pform">'+
    '<select>'+
        '<option selected>Monthly</option>'+
        '<option>bi-Monthly</option>'+
        '<option>Weekly</option>'+
    '</select>'+
    '</form>'+
    '<input type="text" id="dpicker">'
);

// alert($("#pform option:selected").text());
$("#pform").on('change', function() { 
    alert($("#pform option:selected").text());
});
$(function() {
    $("#dpicker").datepicker();
});

allan

Looks like it is missing the jQuery UI date picker CSS, but the functionality looks fine. Nice one.

Allan

ngungo

I've looked all date picker examples but could not find it. That makes me think I have to assign some class to the element to pick up the the style. Can you think of any example so I can imitate?

ngungo

ngungo

I got it. Thanks Allan.

//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css