Moment Dates

by zazvorniki

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class='content'>
  <div>
    <h3>
      Formatting Dates
    </h3>
    <p>
      Date Picker:
    </p>
    <div class="input-group date" data-provide="datepicker">
      <input type="text" class="form-control dateChoice">
      <div class="input-group-addon">
        <span class="glyphicon glyphicon-th"></span>
      </div>
    </div>
  </div>

  <div id='formatting'>
    <p>
      Word formatting:
    </p>
    <span id='wordFormatting'>

    </span>
     <p>
      Truncated formatting:
    </p>
    <span id='truncFormatting'>

    </span>
    <p>
      Year/Month/Day formatting:
    </p>
    <span id='ymdFormatting'>

    </span>
    <p>
      Month/Day/Year formatting:
    </p>
    <span id='mdyFormatting'>

    </span>
    <p>
      Day/Month/Year formatting:
    </p>
    <span id='dmyFormatting'>

    </span>
    
     <p>
      Week of the year:
    </p>
    <span id='weekFormatting'>

    </span>
    
     <p>
      Quarter of the year:
    </p>
    <span id='quarterFormatting'>

    </span>
  </div>



</div>

CSS

.content {
  width: 70%;
  margin: 1em auto;
}

p {
  margin-bottom: 0;
  padding-bottom: 0;
}

h3 {
  margin-bottom: 1em;
  border-bottom: dashed 1px #000;
}

#formatting {
  margin-top: 2em;
}

#formatting p {
  margin-top: 1em;
  font-weight: bold;
}

JavaScript

$(document).ready(function() {
  $('.datepicker').datepicker();

  $('.dateChoice').on('blur', function() {
    var dateValue = $(this).val();

    if (dateValue) {
      $('#wordFormatting').text(moment(dateValue).format('dddd, MMMM Do YYYY'));
      $('#truncFormatting').text(moment(dateValue).format('ddd, MMM Do YYYY'));
      $('#ymdFormatting').text(moment(dateValue).format('YYYY-MM-DD'))
      $('#mdyFormatting').text(moment(dateValue).format('MM-DD-YYYY'))
      $('#dmyFormatting').text(moment(dateValue).format('DD-MM-YYYY'))
      $('#weekFormatting').text(moment(dateValue).format('wo'))
      $('#quarterFormatting').text(moment(dateValue).format('Qo'))


    }

  })

});