Change date format to ISO 8601 using jquery

Question

I have 2 input fields that when a user inputs the date in say mm-dd-yyyy format, i would like to have it automatically change to yyyy-mm-dd (ISO 8601 Date Format)

the input fields are very simple:

<div class="form-group">
        <label for="purchase_date">Purchase Date <font size="-3">(Year-MM-DD) format</font></label>
        <input type="text" name="purchase_date" class="form-control"  placeholder="Purchase Date">
</div>
<div class="form-group">
        <label for="warranty_end_date">Warranty End Date <font size="-3">(Year-MM-DD) format</font></label>
        <input type="text" name="warranty_end_date" class="form-control"  placeholder="Warranty End Date">
</div>

is there a way to do this without using datepicker? I dont want to add any extra styling sheets or any extra js..

Answer 1

Look at this Pen I've created. I'm accepting both mm/dd/yyyy and mm-dd-yyyy formats and doing the conversion on the blur of each input.