Формат c Пользовательский интерфейс DatePicker находится вне экрана

Question

Довольно новый здесь, так что извините, если решения немного "очевидны" :) Я использую указатель даты / календарь "formati c UI", имея дело с двумя проблемами:

1. При нажатии на вход всплывающее окно не отображается. Я пытался исправить это с помощью css позиций (также немного js), но на самом деле стекаю, как сделать это только для всплывающего окна, а не для ввода. Кроме того, мой язык - иврит, поэтому может возникнуть проблема, связанная с проблемами с rtl (я пробовал CDN на rtl, но это было не очень полезно = /)

2. Этот инструмент используется для отфильтровать мои данные. Проблема в том, что когда пользователь щелкает всплывающее окно выбора, оно изменяется, но только при повторном нажатии на входе данные фильтруются. Предполагается, что функция фильтрации находится в режиме «keyup, click, change», но не работает при изменении значения. (для других входов - когда значение изменено - оно действительно работает. Только этот сборщик имеет проблему)

мой код:

$(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() +  7);
	var month_week_from_today = week_from_today.getMonth()+1;
	var year_from_today= week_from_today.getFullYear().toString().substr(-2);

	
	if(start_date_picker) {start_date_picker.value = today.getDate()+ "." + month_picker_start+ "." + year_from_today;}
	if(end_date_picker) {end_date_picker.value = week_from_today.getDate()+ "." +month_week_from_today + "." + year_from_today;}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/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>