JSFiddle - React, Tailwind, and code Playground

by Lalji Tadhani

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui-calendar/0.0.8/calendar.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui-calendar/0.0.8/calendar.min.css" />

<i class="ui calendar" id="rangestart">
          <div class="ui transparent input right icon">
            <i class="calendar alternate outline icon grey icon"></i>
            <input type="text" id="start_date_picker" style="text-align:right;">
          </div>
	 </i>
	-
       <i class="ui calendar" id="rangeend">
          <div class="ui transparent input right icon">
            <input type="text" id="end_date_picker"  style="text-align:right;">
          </div>
        </i>

JavaScript

$(document).ready(function () {
    $('#start_date_picker,#end_date_picker').on("keyup click change", filterAll);
});	

	
		var today = new Date();
$('#rangestart').calendar({
  type: 'date',
  endCalendar: $('#rangeend'),
	text: {
      days: ['א', 'ב', 'ג', 'ד', 'ה', 'ו', 'ש'],
      months: ['ינואר', 'פברואר', 'מרץ', 'אפריל', 'מאי', 'יוני', 'יולי', 'אוגוסט', 'ספטמבר', 'אוקטובר', 'נובמבר', 'דצמבר'],
      monthsShort: ['ינ', 'פב', 'מרץ', 'אפר', 'מאי', 'יונ', 'יול', 'אוג', 'ספט', 'אוק', 'נוב', 'דצמ'],
      today: 'היום',
      now: 'כעת'
    },
		minDate: new Date(today.getFullYear(), today.getMonth(), today.getDate() ),
		  monthFirst: false,
	formatter: {
      date: function (date, settings) {
        if (!date) return '';
        var day = date.getDate();
        var month = date.getMonth() + 1;
		var year= date.getFullYear().toString().substr(-2);
        return day + '.' + month +  '.' + year;
      }
    }	
});
$('#rangeend').calendar({
  type: 'date',
  startCalendar: $('#rangestart'),
	text: {
      days: ['א', 'ב', 'ג', 'ד', 'ה', 'ו', 'ש'],
      months: ['ינואר', 'פברואר', 'מרץ', 'אפריל', 'מאי', 'יוני', 'יולי', 'אוגוסט', 'ספטמבר', 'אוקטובר', 'נובמבר', 'דצמבר'],
      monthsShort: ['ינ', 'פב', 'מרץ', 'אפר', 'מאי', 'יונ', 'יול', 'אוג', 'ספט', 'אוק', 'נוב', 'דצמ'],
      today: 'היום',
      now: 'כעת'
    },
		  monthFirst: false,
		formatter: {
      date: function (date, settings) {
        if (!date) return '';
        var day = date.getDate();
        var month = date.getMonth() + 1;
		  var year= date.getFullYear().toString().substr(-2);
        return day + '.' + month +  '.' + year;
      }
    }
});
	
	var start_date_picker = document.getElementById('start_date_picker');
	var end_date_picker = document.getElementById('end_date_picker');
	var month_picker_start = today.getMonth()+1;
	var year_picker_start= today.getFullYear().toString().substr(-2);
	
    var week_from_today = new Date();
      week_from_today.setDate(week_from_today.getDate() + ...