jQuery addClass example

Change class name on click in jQuery

HTML

<input type="text" 
       placeholder="Date of Appointment" 
       id="appointment_date" 
       name="appointment_date" 
       class="input-sm form-full" >

CSS

input[type=date]::-webkit-datetime-edit-text {
    -webkit-appearance: none;
    display: none;
}
input[type=date]::-webkit-datetime-edit-month-field{
    -webkit-appearance: none;
    display: none;
}
input[type=date]::-webkit-datetime-edit-day-field {
    -webkit-appearance: none;
    display: none;
}
input[type=date]::-webkit-datetime-edit-year-field {
    -webkit-appearance: none;
    display: none;
}

JavaScript

$("#appointment_date").on('focus', function(){
	this.type='date';
});

$("#appointment_date").on('input', function(){
	this.type='text';
});