Как создать несколько указателей даты и времени в шаблоне django (для цикла) и jquery - PullRequest
Новая
       44

Как создать несколько указателей даты и времени в шаблоне django (для цикла) и jquery

0 голосов
/ 02 октября 2019

У меня проблемы с тем, чтобы django отображал несколько указателей даты и времени во вкладках на html-странице. Я могу заставить их работать, если я укажу каждый элемент в jquery вне цикла, но когда я помещаю его в цикл, они не отображаются (отображается только пустое поле ввода). Поскольку это должно быть сделано для массива различных размеров (минимальная длина 1 и не максимальная), я не могу жестко закодировать каждый отдельный указатель даты и времени. Цикл for на html-странице шаблона django работает, и каждая вкладка и разделы, в которых идут datetimepickers, созданы, но jquery не будет работать.

Я попытался сделать 4 datetimepickers через цикл (4 на вкладку, может иметь 1+ вкладок), и они не создают объект datetimepicker. Просто создает текстовое поле ввода.

Я также попытался поместить их все в class = datetimepicker, который работает, но затем я не могу добавить данные по умолчанию из массива для заполнения каждого datetimepicker, так какединственная функция в jquery - это одиночная функция, вызывающая класс .datetimepicker. Попробовал $ ('# date1'). Datetimepicker ({defaultDate: array [counter] [0]}) в массиве, чтобы заполнить каждую вкладку для date1 datetimepicker, и это тоже не работает.

, исключаяобычный код шаблона django и просто помещение в раздел не работает: 

------------------- template html ------------------------

{% if entryList %}
  <ul id="tab_links" class="nav nav-tabs justify-content-center">
    {% for entry in entryList %}
      {% if forloop.first %} <!-- won't go through the first iteration otherwise -->
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab_{{forloop.counter0}}">{{entry.0}}</a></li>
      {% else %}
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab_{{forloop.counter0}}">{{entry.0}}</a></li>
      {% endif %}
    {% endfor %}
  </ul>

  <div id="tab_content" class="tab-content">
    {% for entry in entryList %}
      {% if forloop.first %}
        <div id="tab_{{forloop.counter0}}" class="tab-pane fade in active">
          <table cellspacing="10" cellpadding="10">
            <tr>
              <td> date1: </td>
              <td style="position:relative">
                <input class="datetimepicker" type="text" id="date_{{forloop.counter0}}" name="date_{{forloop.counter0}}" "> 
              </td>
                <!-- other input like txt boxes or drop down menus -->
            </tr>
            <tr>
              <td> date2: </td>
              <td style="position:relative">
                <input class="datetimepicker" type="text" id="date_{{forloop.counter0}}" name="date_{{forloop.counter0}}" "> 
              </td>
                <!-- other input like txt boxes or drop down menus -->
            </tr>
            <tr>
              <td> date3: </td>
              <td style="position:relative">
                <input class="datetimepicker" type="text" id="date_{{forloop.counter0}}" name="date_{{forloop.counter0}}" "> 
              </td>
                <!-- other input like txt boxes or drop down menus -->
            </tr>
            <tr>
              <td> date4: </td>
              <td style="position:relative">
                <input class="datetimepicker" type="text" id="date_{{forloop.counter0}}" name="date_{{forloop.counter0}}" "> 
              </td>
                <!-- other input like txt boxes or drop down menus -->
            </tr>
          </table>
        </div>
       {% else %}
         <div id="tab_{{forloop.counter0}}" class="tab-pane fade">
           <table cellspacing="10" cellpadding="10">
             <tr>
              <td> date1: </td>
              <td style="position:relative">
                <input class="datetimepicker" type="text" id="date_{{forloop.counter0}}" name="date_{{forloop.counter0}}" "> 
              </td>
                <!-- other input like txt boxes or drop down menus -->
            </tr>
            <tr>
              <td> date2: </td>
              <td style="position:relative">
                <input class="datetimepicker" type="text" id="date_{{forloop.counter0}}" name="date_{{forloop.counter0}}" "> 
              </td>
                <!-- other input like txt boxes or drop down menus -->
            </tr>
            <tr>
              <td> date3: </td>
              <td style="position:relative">
                <input class="datetimepicker" type="text" id="date_{{forloop.counter0}}" name="date_{{forloop.counter0}}" "> 
              </td>
                <!-- other input like txt boxes or drop down menus -->
            </tr>
            <tr>
              <td> date4: </td>
              <td style="position:relative">
                <input class="datetimepicker" type="text" id="date_{{forloop.counter0}}" name="date_{{forloop.counter0}}" "> 
              </td>
                <!-- other input like txt boxes or drop down menus -->
            </tr>
          </table>
        </div>
       {% endif %}
      {% endfor %}
    </div>
.
.  other data on template html
.
<script>    var numOfTabs = {{entryListLength}};
        var jsondataList = {{json_dataList|safe}};
</script>
<script src="{% static 'js/dates.js' %}"> </script>  <!-- right before /body tag -->

--------------------------------js/dates.js------------------------------

// gotta use a for loop to get all tabs
// 4 parts of the array are dates: 7 - date rec, 10 - date ret, 16 - key req date, 17 - key rec date

var count = 0;

for (count; count < numOfTabs; count++) {
    // date1
    if ((jsondataList != null) && (jsondataList.length != 0) && (jsondataList[count][7] != null) && (jsondataList[count][7].length != 0)) {
        var datearr = jsondataList[count][7].split(/-|\s|:/);
        var date1 = new Date(datearr[0], datearr[1] - 1, datearr[2], datearr[3], datearr[4], datearr[5]);
        var inName = "#date1_" + count;
        console.log('array slot : ', count, 7, date1, inName);
        $(function() {
            $(inName).datetimepicker({
                useCurrent:false,
                  format: 'YYYY-MM-DD HH:mm:ss',
                defaultDate: date1,
            });
        });
    } else {
        $(function() {
            $("#date1_" + count).datetimepicker({
              format: 'YYYY-MM-DD HH:mm:ss',
            });
        });
    }
    // date2
    if ((jsondataList != null) && (jsondataList.length != 0) && (jsondataList[count][10] != null) && (jsondataList[count][10].length != 0)) {
        var datearr = jsondataList[count][10].split(/-|\s|:/);
        var date2 = new Date(datearr[0], datearr[1] - 1, datearr[2], datearr[3], datearr[4], datearr[5]);
        var inName = "#date2_" + count;
        console.log('array slot : ', count, 10, date2, inName);
        $(function() {
            $(inName).datetimepicker({
                useCurrent:false,
                  format: 'YYYY-MM-DD HH:mm:ss',
                defaultDate: date2,
            });
        });
    } else {
        $(function() {
            $("#date2_" + count).datetimepicker({
              format: 'YYYY-MM-DD HH:mm:ss',
            });
        });
    }
// date3
    if ((jsondataList != null) && (jsondataList.length != 0) && (jsondataList[count][16] != null) && (jsondataList[count][16].length != 0)) {
        var datearr = jsondataList[count][16].split(/-|\s|:/);
        var date3 = new Date(datearr[0], datearr[1] - 1, datearr[2], datearr[3], datearr[4], datearr[5]);
        var inName = "#date3_" + count;
        console.log('array slot : ', count, 16, date3, inName);
        $(function() {
            $(inName).datetimepicker({
                useCurrent:false,
                  format: 'YYYY-MM-DD HH:mm:ss',
                defaultDate: date3,
            });
        });
    } else {
        $(function() {
            $("#date3_" + count).datetimepicker({
              format: 'YYYY-MM-DD HH:mm:ss',
            });
        });
    }
// date4
    if ((jsondataList != null) && (jsondataList.length != 0) && (jsondataList[count][17] != null) && (jsondataList[count][17].length != 0)) {
        var datearr = jsondataList[count][17].split(/-|\s|:/);
        var date4 = new Date(datearr[0], datearr[1] - 1, datearr[2], datearr[3], datearr[4], datearr[5]);
        var inName = "#date4_" + count;
        console.log('array slot : ', count, 17, date4, inName);
        $(function() {
            $(inName).datetimepicker({
                useCurrent:false,
                  format: 'YYYY-MM-DD HH:mm:ss',
                defaultDate: date4,
            });
        });
    } else {
        $(function() {
            $("#date4_" + count).datetimepicker({
              format: 'YYYY-MM-DD HH:mm:ss',
            });
        });
    }
}

The code for the class version is 

        $(function() {
            $(".datetimepicker").datetimepicker();
        });
*this works for making datetimepickers, but can't put default values in.

Ожидаемый результат заключается в том, что у него есть вкладки на странице, число которых равно размеру списка массивов / списков, т.е. списка[х] [у] будет х вкладок. На каждой вкладке находятся входные переменные (текстовые поля, области и т. Д.), А также 4 указателя даты и времени. Datetimepickers должны отображать значение по умолчанию из списка для каждой вкладки и иметь возможность выбрать другое значение, основанное на щелчке объекта datetimepicker и всплывающем календаре.

Фактический вывод показывает все, кроме datetimepickers. Устройства выбора даты и времени отображаются в виде текстовых полей, не заполняют значения по умолчанию и не загружают календарь при нажатии (вместо этого действуйте как текстовые поля). Если я сделаю js как функцию, действующую только на сам класс, он создаст объекты datetimepicker, но не позволит мне установить значения по умолчанию.

Все остальное в шаблоне работает, только datetimepickersкогда в цикле этого нет. Уже несколько недель пытаюсь это выяснить.

РЕДАКТИРОВАТЬ:

Также следует отметить: если я создаю каждый из 4 указателей даты-времени вне цикла, то для вкладкиЯ создаю их, чтобы они работали, но, поскольку я не знаю, сколько вкладок у меня будет, мне придется делать это динамически, поэтому их в цикле javascript.

1 Ответ

0 голосов
/ 09 октября 2019

нашел решение для всех, у кого есть такая же или похожая проблема. Вместо непосредственного создания datetimepicker в цикле, я отделил функцию datetimepicker от цикла и просто вызвал ее.

т.е.: 

for loop
    ....
    ....
    call mydatetimepicker(variable, variable)

mydatetimepicker(variable, variable) {
 code to create a datetimepicker
}

, поскольку жизнь меня не смогла получитьработать внутри цикла, но как только я их разделю, он будет работать нормально даже с датами по умолчанию.

...