jqueryui datepicker with hidden input

Question

I got a button and a hidden input.

I want the datepicker opens below the button I click it. And the selected date is inserted in the hidden input.

I don't want to create a new button (using datepicker options), and I don't wanna show the input.

<button type="button" class="btn" id="date_button">Select Date...</button>

<input type="hidden" name="date" id="date_field" />

<script>
    $('#date_button').datepicker({
        showOn: "button",
        onSelect: function( dateText ) {
            $('#date_field').val( dateText );
            $('#date_button').text( dateText );
        }
    })
</script>

Any ideas?

Rother Fuchs · Accepted Answer · 2014-06-18 14:14:56Z

15

I did this by doing a .show().focus().hide() - works perfectly though it's a bit unclean:

$(document).ready(function() {
    $('input').datepicker();
        $('#mybutton').click(function() {
        $('input').show().focus().hide();
    });
});

http://jsfiddle.net/JKLBn/

answered Jun 18, 2014 at 14:14

Rother Fuchs

1911 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Niklas Bäckman Over a year ago

Does not work in IE with newer jQuery versions. (Probably because IE sets focus asynchronously)

Andrew Whitaker · Accepted Answer · 2012-06-27 00:54:41Z

1

This is a little hacky, but it seems to work okay:

Attach the datepicker to the input instead of the button.
Reposition the datepicker to be underneath the button when it opens.

var $button = $("#date_button"),
    left = $button.offset().left,
    top = $button.offset().top + $button.height();

$('#date_field').datepicker({
    onSelect: function(dateText) {
        $('#date_field').val(dateText);
        $button.text(dateText);
    },
    beforeShow: function (event, ui) {
        setTimeout(function () {
            ui.dpDiv.css({ left: left, top: top });      
        }, 5);               
    }
});

$button.on("click", function() {
    $("#date_field").datepicker("show");
});

Example: http://jsfiddle.net/StUsH/

answered Jun 27, 2012 at 0:54

Andrew Whitaker

126k32 gold badges296 silver badges308 bronze badges

2 Comments

kibibu Over a year ago

@J.Ghyllebert I've updated the jsfiddle to a version that works. There appears to be an issue in jsfiddle with jQuery 1.9.1 and jQueryUI 1.9.2, the datepicker chokes on $.browser.msie.

Matt S Over a year ago

Instead of using a hidden input, use a text input and hide it with CSS. Initializing the datepicker on a hidden input will cause an error on positioning.

Jason Roman · Accepted Answer · 2018-05-25 16:06:50Z

0

I did it different way. I have hidden normal text input by the button with style:

style="outline: none; color:white; margin-top:-20px; border:none;"

so it doesn't appear on the page. It is focusable and it just works fine.

edited May 25, 2018 at 16:06

Jason Roman

8,30610 gold badges37 silver badges44 bronze badges

answered May 25, 2018 at 15:44

rifle2000

3712 silver badges8 bronze badges

Collectives™ on Stack Overflow

jqueryui datepicker with hidden input

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related