Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

Date Picker #315

okproject opened this Issue Dec 27, 2013 · 5 comments


None yet
2 participants

I want to use date picker as followed way.

I will define standard flatUI button.
When i clicked it , it shows picker (near button). It does not contain an input box. I dont want to activate show picker when i click to input box. I need just button.

After i select date, i need to write it to a div content as label or etc...

Can you help me pls ?

pytkin commented Dec 29, 2013

Hello, @okproject.

You can attach datepicker to div or span: http://jqueryui.com/datepicker/#inline


<span id="datepicker-container"></span><span id="datepicker-output"></span><a class="btn btn-xs btn-primary" id="datepicker-btn"><span class="fui-calendar"></span></a>


$(function() {
    $('#datepicker-container').datepicker( {
        onSelect: function(date) {
    }).datepicker( "hide" );

    $("#datepicker-btn").on("click", function () {

This is not all, of course you need write more css and js. Datepicker API documentation.

Actually i need IconTrigger style without input box. I need button to show date container and i need a span to write result.

How to replace icon with FlatUI icon on http://jqueryui.com/datepicker/#icon-trigger example @pytkin

pytkin commented Jan 23, 2014

@okproject. Please, use my example.

@pytkin I already tried your code.

But , there is a button, date picker shown in the browser.
But date picker content should be shown after click the datepicker button.
The problem is, datepicker content, everytime showning on the browser.

What i am trying to say, how can i hide date picker content area defaultly ? I mean , i need show datepicker content when i click button. After i select date, date picker content should be hidden again.

pytkin commented Jun 13, 2014

@okproject, You can use this code:


<input id="datepicker-container" type="hidden"><a class="btn btn-xs btn-primary" id="datepicker-btn"><span class="fui-calendar"></span></a>


$(function() {
  var calendar = $('#datepicker-container').datepicker({
    onSelect: function (date) {
  var btn = $("#datepicker-btn");
  btn.on("click", function () { 
    calendar.datepicker("show"); $(this).hide();
  calendar.datepicker('option', 'onClose', function () {

@pytkin pytkin closed this Jun 13, 2014

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment