Простой подборщик даты и времени в django

Я довольно новичок в django, так что не обижайтесь на меня.

Я хотел бы иметь несколько датапикеров на некоторых моих страницах. Я следовал руководству по следующей ссылке для Fengyuan Chen's Datepicker (последний): https://simpleisbetterthancomplex.com/tutorial/2019/01/03/how-to-use-date-picker-with-django.html

Если я создаю отдельную html-страницу с помощью предоставленного кода, все отлично! Однако я не понимаю, как встроить функцию выбора даты и времени в другие страницы.

Все мои html-страницы расширяют базу. И я помещаю в головку базы все содержимое следующим образом:

base.html

 <head>
    /* some unrelated things*/
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"> 
    </script>

    <!-- Fengyuan Chen's Datepicker -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.min.css" integrity="sha256-b88RdwbRJEzRx95nCuuva+hO5ExvXXnpX+78h8DjyOE=" crossorigin="anonymous" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.min.js" integrity="sha256-/7FLTdzP6CfC1VBAj/rsp3Rinuuu9leMRGd354hvk0k=" crossorigin="anonymous"></script>

</head>

Затем, на странице, в которой мне нужно иметь пикер:

    {% extends 'main/base.html' %}
    <input id="datepicker">

    {% block myBlock%}
        <script>
          $(function () {
            $("#datepicker").datepicker();
          });
        </script>
    {% endblock %}

по моему мнению

def test1(response):
    
    return render(response, "main/test1.html", {})

В результате я получаю поле ввода, которое вообще не двигается.

Меня расстраивает тот факт, что многие руководства посвящены отдельным страницам, и не так много руководств описывают встраивание. Но, возможно, дело в том, что я очень новичок в этом деле.

Спасибо за помощь!

если вы не используете какую-либо модель или форму, используйте ее вот так в html файле, это не имеет никакого отношения к django, загрузите эту функцию до

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Datepick</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#datepicker" ).datepicker();
  } );
  </script>
</head>
<body>
<input type="text" id="datepicker">
</body>
</html>

и если вы используете форму или модель, вы можете использовать виджет

from django.forms.widgets import DateInput
class dateform(forms.ModelForm):
    class Meta:
        model = date
        fields = '__all__'
        labels = {
            'dob':'Date Of Birth',
        }
        widgets = {
            'dob': forms.DateInput(attrs={'type': 'date'})
        }

надеюсь, это решит вашу проблему, счастливого кодирования

В конечном итоге, самый простой способ включить переключатели дат - это полагаться на input type 'date'

Я знаю, что иногда это может быть визуализировано по-разному в разных браузерах, но главное, что это делает то, что я хочу: позволяет пользователю выбрать дату.

html page

<form method="POST">
    {% csrf_token %}        
    Start date 
    <input type = 'date'  name='start_date' value={{defaultDates.start}}>
    End date 
    <input type = 'date'  name='end_date' value={{defaultDates.end}}>
    <button type="submit" class="btn btn-info" name="setDateRange.end">Set Date Range</button>
</form>
Вернуться на верх