JSFiddle - React, Tailwind, and code Playground

by ipvalverde

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.2/i18n/jquery.ui.datepicker-ru.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.2/i18n/jquery.ui.datepicker-zh-HK.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.2/i18n/jquery.ui.datepicker-en-GB.min.js"></script>
Date input #1: <input data-datepicker id="firstInput" type="text" /><br />
Date input #2: <input data-datepicker id="secondInput" type="text" /><br />
Always "yy-mm-dd" date input: <input data-datepicker id="fixedFormatInput" type="text" /><br />
<br />
<br />
<br />
Select your locale: <select id="culture" >
<option value="">Default (en-US)</option>
<option value="ru">Russian (ru)</option>
<option value="zh-HK">Hong Kong Chinese (zh-HK)</option>
<option value="en-GB">English GB (en-GB)</option>
</select>

JavaScript

$(function () {
  // Set "en-US" as the default:
  $.datepicker.setDefaults($.datepicker.regional[""]);

  // Initialize all datepicker, "#fixedFormatInput" included.
	$('input[data-datepicker]').datepicker();
  
  // Sets the date format for the third input
  // reference: http://api.jqueryui.com/datepicker/#option-dateFormat
  $('#fixedFormatInput').datepicker("option", "dateFormat", "yy-mm-dd");
  
  
  $('#culture').change(function (event) {
    var newCulture = $(event.target).val();
    
    // Set the new culture for the component:
    var datepickerRegional = $.datepicker.regional[newCulture];
    if(!datepickerRegional) {
      throw 'Opps! The regional for "' + newCulture + '" is not available!';
    }
    
    $.datepicker.setDefaults(datepickerRegional);
    
    // Clear components existing data:
    $('input[data-datepicker]').datepicker("setDate", null);
  });
})