JSFiddle - React, Tailwind, and code Playground

by nucklear

HTML

<!doctype html>
<html lang="en">
  
  <head>
    <meta charset="utf-8" />
    <title></title>
    <!-- HTML5 Shim, IE8 and bellow recognize HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <!-- Modernizr -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
    <!-- Webforms2 -->
    <script src="https://github.com/westonruter/webforms2/blob/master/webforms2-p.js"></script>
    <!-- jQuery and jQuery UI -->
    <link rel="stylesheet" href="http://nettuts.s3.amazonaws.com/881_html5Forms/demo/ui-themes/aristo/jquery.ui.all.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
    <!-- jQuery Color Picker -->
    <link rel="stylesheet" href="http://nettuts.s3.amazonaws.com/881_html5Forms/demo/components/colorpicker/colorpicker.css">
    <script src="http://nettuts.s3.amazonaws.com/881_html5Forms/demo/components/colorpicker/colorpicker.js"></script>
  </head>
  
  <body>
    <form>
      <label for="date-picker">Date picker</label>
      <input type="date" name="date-picker" id="date-picker"
      value="2010-10-06">
    </form>
  </body>

</html>

JavaScript

/* Datepicker
 * input[type=date] fallback
 *
 * using jQuery UI Datepicker
 */
var initDatepicker = function () {
  $('input[type=date]').each(function () {
    var $input = $(this);
    $input.datepicker({
      minDate: $input.attr('min'),
      maxDate: $input.attr('max'),
      dateFormat: 'yy-mm-dd'
    });
  });
};

if (!Modernizr.inputtypes.date) {
  $(document).ready(initDatepicker);
};