Trigger jQueryUI datePicker on button click, send result to disabled input field

Question

I've been searching for a way to do this, but could not find anything

I want to have a:

Disabled input text field, called #XX. This input will store the selected value from datepicker (as this input is disabled I won't be able to use this to trigger the datePicker)
Button, besides #XX. When user clicks this button, datePicker will show. User will select the date, and this date will be assigned to disabled input #XX.

I want this so user can't change manually -by typing crap- the selected date

Also, should I validate if date was entered using #XX.val()? or is there a better way?

Andy E · Accepted Answer · 2017-03-15 10:20:08Z

48

You can show a datepicker that has been previously attached to an input element using the "show" method.

$('#myButton').click(function () {
    $('#myField').datepicker("show");
});

edited Mar 15, 2017 at 10:20

answered Apr 9, 2010 at 23:14

Andy E

346k86 gold badges482 silver badges452 bronze badges

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

Comments

dochoffiday · Accepted Answer · 2010-04-09 23:19:48Z

9

<script type="text/javascript">
    $(function () {
        $("#datepicker").datepicker({
            constrainInput: true,
            showOn: 'button',
            buttonText: 'Select...'
        });
    });
</script>
<input id="datepicker" disabled="disabled" />

This will add a button next to the input field, and disable the user from entering text into the field...

answered Apr 9, 2010 at 23:19

dochoffiday

5,6057 gold badges34 silver badges41 bronze badges

Comments

Kurt Van den Branden · Accepted Answer · 2016-12-17 16:02:53Z

1

Might be to late but I just did this

$("#firstDate").datepicker({
    onSelect: function () {
        myfunc();
    }
}); 

$("#secondDate").datepicker({
    showOn: ''
}); 

function myfunc(){
    var fDate = $('#firstDate');
    var sDate = $('#secondDate');
    sDate.val(fDate.val());
}

It doesn't show the datepicker clicking the input and doesn't display the button to show the datepicker. Disabled doesn't work in my case because I need to extract the value from that input field.

edited Dec 17, 2016 at 16:02

Kurt Van den Branden

13.2k10 gold badges83 silver badges92 bronze badges

answered Dec 17, 2016 at 14:49

SammeAyala

991 silver badge4 bronze badges

Collectives™ on Stack Overflow

Trigger jQueryUI datePicker on button click, send result to disabled input field

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related