JSFiddle - React, Tailwind, and code Playground

by MartijnR

HTML

<form>
    <input id="b" type="date" />
</form>

CSS

input {
    display: block;
    margin: 4em auto;
}

.gotit{
    display: block;
    background-color: green;
}

JavaScript

var date1 = "2010-05-07";

$('#b').val(date1);

$('form').on('change', 'input[type="date"]', function (event) {
    alert('detected input:date change event');
    var correctedVal,
        val = $(this).val();
    if (/^[0-9]{4}-[0-9]{2}-[0-9]{4}-[0-9]{2}$/.test(val)) {
        correctedVal = val.substring(0, 10);
        $(this).val(correctedVal); //need to fire new event?
        console.error('Samsung bug detected with date input. Changed value from ' + val + ' to ' + correctedVal);
        alert('Samsung bug occurred! Tried to work around it. new value: ' + $(this).val());
    }
    return true;
});

$('form').on('change', 'input', function(){
    alert('detected general input change event');
    var val = $(this).val();
    $(this).after('<span class="gotit">'+val+'</span>');
});