Moment js date validation

Change class name on click in jQuery

by Jason Crowther

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<body style="background: #fff">
  
<p>Put in a date and tab off the field.</p>

<div class="form-group">
  <label for="dateField">Date In Service</label>
  <input type="text" name="dateField" id="dateField" size="10" maxlength="10">
</div>

<p>Moment Says:</p>
<p>valid: <span id="response">--</span></p>
<p>reformated: <span id="reformatted">--</span></p>

</body>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

JavaScript

$(document).ready(function(){

	$('#dateField').change(function(){
    var r = validateDate( $(this).val() );

		$('#response').text( r.valid );
    
    var t = '--'
    
    if( r.valid )
    	t = r.moment.format('MM/DD/YYYY')
    
    $('#reformatted').text(t)

  })

});

function validateDate(d) {
    var m = moment(d,"MM/DD/YYYY"); 
    
    if( m.isValid() )
    	return { valid: true, moment: m };
    
    return { valid: false }
}