Emily Emily - 5 months ago 16
Javascript Question

jQuery: OnSelect not working for DatePicker

So I want to create a hidden input field that will display the datepicker once a button is clicked. Then, call a function that I created and do something with it. This is what I have for the HTML:

<input type="hidden" id="showDate" class="datepicker"/>
<button id="buttonDate" value="submit">Show Date</button>


As for the jquery, this is what I have below:

$('#buttonDate').click(function () {
$('#showDate').datepicker();
$('#showDate').datepicker('show', {
onSelect: doSomething
}
});
})

function doSomething() {
var selectedDate = $('#showDate').val();
alert("I AM HERE" + selectedDate);
}


What my code does right now is display the calendar on the button click, BUT it will not run the function. I really want to call that doSomething function so I can do something with the selected date, but it seems like onSelect is not working.

I know that there is a "showOn: button" for datepicker, but that creates a new button pop out, which I do not want.

Answer

Try to include the onselect during initializing itself

 $('#buttonDate').click(function () {

        $('#showDate').datepicker({ onSelect:
            function(dateText, inst) {
              var selectedDate = $('#showDate').val();
             console.log(selectedDate);
            }
        });
        $('#showDate').datepicker('show');
    });
Comments