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

Closed
okproject opened this Issue Dec 27, 2013 · 5 comments

Comments

Projects
None yet
2 participants

Hi,
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

HTML:

<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>

JS:

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

    $("#datepicker-btn").on("click", function () {
      $('#datepicker-container').datepicker("show");
    });
});

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:

HTML:

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

JS:

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

@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