Как использовать datepicker в простой форме Django?

Прежде чем вы отметите это как дубликат на most famous django datepicker question on SO, выслушайте меня. Я рассмотрел все вопросы на первых десяти страницах результатов поиска, но никто, кажется, ничего не объясняет с самого начала.Как использовать datepicker в простой форме Django?

Что я ищу, это самый простой способ иметь датупик на моей форме, я не знаю, импортирует ли его самый простой способ из Admin или с помощью существующей вещи jQuery, но что бы это ни было, может кто-то, пожалуйста, объясните шаг за шагом, как если бы вы сделали это с ребенком? Это, я считаю, поможет любому новому программисту, вроде меня, который хочет учиться. Это то, что у меня есть до сих пор.

Моя форма:

class SampleForm(forms.Form): 
    date_of_birth = forms.DateField(label='Enter Date')

Мой Вид:

def dlp_test(request): 
    form = SampleForm() 
    return render(request, 'dlp_test.html', {'form': form})

Мой Шаблон:

<form action="/your-name/" method="post"> 
    {% csrf_token %} 
    {{ form }} 
    <input type="submit" value="Submit" /> 
</form>

Это самая простая установка любой человек может начать с, как я понимаю, отсюда? Когда кто-то нажимает на поле даты в HTML, я хочу, чтобы календарь всплывал, чтобы они могли выбрать дату.

Если для этого требуется наличие локально сохраненных файлов JS или jQuery, я бы предпочел, чтобы URL-адрес был встроен в HTML, а не загружался, а затем упоминал источник, потому что мои пути запутались прямо сейчас. Вы можете предположить, что у меня больше ничего не загружено и не установлено, кроме Django и Python.

источник

2017-02-10 DeA

Это то, что я добавил в мой шаблон, и теперь он работает. Кому-то в будущем ищите ответа, вот оно. Хотя, я должен сказать вам, что это может плохо масштабироваться в крупных проектах, возможно, вам придется использовать эту функцию везде или что-то в этом роде, но пока это работает для меня.

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>jQuery UI Datepicker - Default functionality</title> 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
    <link rel="stylesheet" href="/resources/demos/style.css"> 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
    </head> 

<body> 
<form action="." method="post"> 
    {% csrf_token %} 
    {{form.as_p}} 
    <p>Date: <input type="text" id="datepicker"></p> 
    <input type="submit" value="Submit" /> 
</form> 


<script> 

     $(function() 
     { 
     $("#id_date_of_birth").datepicker(); 
     $("#datepicker").datepicker(); 
     }); 
</script> 


</body> 
</html>

источник

2017-02-10 19:03:20 DeA

Это, вероятно, несколько Hacky, но когда я хочу использовать jQueryUI datepicker для конкретного поля формы я делаю это:

Добавить таблицу стилей в <head> моего шаблона:

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />

Добавьте файл JavaScript в конце моего шаблона:

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>

В поле вашей формы, с которой вы хотите использовать datepicker, будет свой ID. В вашем случае это будет id_date_of_birth. Таким образом, вы можете выбрать дату рождения текстового поля по идентификатору и применить DatePicker к нему (это предполагает, что вы также используете JQuery):

<script> 
    $(document).ready(function() { 
     $('#id_date_of_birth').datepicker({firstDay: 1, 
      dateFormat: "dd/mm/yy", 
      defaultDate: "16/06/2017", 
      minDate: "16/06/2017", 
      maxDate: "25/06/2017"}); 
    }); 
</script>

Обратите внимание, что этот фрагмент должен прийти ПОСЛЕ вы включите файл JavaScript. Кроме того, я устанавливаю некоторые значения по умолчанию не может понадобиться - самый простым способом, чтобы заставить его работать будет:

<script> 
    $(document).ready(function() { 
     $('#id_date_of_birth').datepicker(); 
    }); 
</script>

Надеется, что поможет вам!

источник

2017-02-10 17:43:19

Это похоже на то, что вы хотели, чтобы я сделал? http: // pastebin.com/pdKmMcX7 – DeA

@DeA вот некоторые комментарии: http://pastebin.com/YkAAvyz5. –

Yup, что определенно предоставил некоторые указатели. Благодаря! – DeA

Как использовать datepicker в простой форме Django?

ответ

Смежные вопросы