Listening to onChange on a jQuery datepicker?

Question

I currently am creating a date picker like so

HTML

<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<input id="datepicker" type="datepicker" name="date" placeholder="Date" />

JS

$('#datepicker').datepicker()
    .on("change", function (e) {
    console.log("Date changed: ", e.target.value);
});

My goal is to be able to listen for when the user clears out the date box. However, the change event only seems to fire once you unfocus the date box. I'm wondering if there's a way to listen for all changes in a jQuery date box, or if there are any better alternatives.

JsFiddle link: https://jsfiddle.net/szkfm0y7/

that type is not a valid type. You might want to change it to text and see if that works for you. — Cayce K, May 08 '15 at 21:01

score 36 · Accepted Answer · edited May 23 '17 at 12:10

36

Use jquery on input alongside with the on change event

$('#datepicker').datepicker()
    .on("input change", function (e) {
    console.log("Date changed: ", e.target.value);
});

Fiddle

edited May 23 '17 at 12:10

Community

1
1

answered May 08 '15 at 21:14

Robin Carlo Catacutan

13,249
11
52
85

score 5 · Answer 2 · answered May 08 '15 at 21:04

Here is a possible solution:https://jsfiddle.net/7atsua85/

Instead of e.target.value, use $(this).val() as shown below,

$('#datepicker').datepicker()
    .on("change", function (e) {
    //console.log("Date changed: ", e.target.value);
    alert($(this).val())
});

Listening to onChange on a jQuery datepicker?

2 Answers2

Linked

Related