Jquery UI Datepicker does not focus input

Question

I am trying to create a form using the jquery ui datepicker.
Everything works perfectly except that since I changed the design of the input fields the placeholder attribute is not removed when a date is picked.

Here is the fiddle: https://jsfiddle.net/deqguphb/

HTML

<form>
     <ol>
         <li>
           <input id="input1" name="input1" value="" placeholder="Input1: Working just fine"/>
           <label for="input1">Input1</label>
         </li>
         <li>
           <input id="input2" name="input2" value="" placeholder="Input2: The placeholder stays" />
           <label for="input2">Input2</label>
         </li>
         <li>
           <input id="input3" name="input2" value="" placeholder="Input3: The placeholder stays" />
           <label for="input3">Input3</label>
         </li>
    </ol>
</form>

Javascript

/* The focus effect */
$("input:not([value]),input[value='']").addClass('empty');

/* Input event handling */
$('input').on('input keyup', function() {  
      $(this).toggleClass('empty', !Boolean($(this).val()));
});

I do not know what event is fired after a date is picked. I tried with onKeyup and onChange but that did not solve the problem.

I would be beyond happy for a solution on this.

Answer 1

I have updated your fiddle,

I have added two events to your each of the textbox for place holder.

onfocus="this.placeholder = ''" onblur="this.placeholder = 'Input1: Working just fine'"

Fiddle is : https://jsfiddle.net/deqguphb/4/

You need to use focus and blur event for textbox.

Hope this will help you :)