如果你的模型中含有 datetime 型別的欄位，表單中需要使用者輸入日期和時間，那麼你如何保證不同使用者輸入的時間都遵循一定的格式 (DD/MM/YYYY 或者 YYYY-MM-DD) 是個必須要考慮的問題。一個更好的方式是在前端使用日期時間選擇器 DateTimePicker，以日曆的形式統一選擇輸入時間，如下圖所示。小編今天將嘗試以最少的程式碼教你實現如何在 Django 專案中實現日期時間選擇器 DateTimePicker。

示範模型

假如我們有如下一個 Article 模型，含有 pub_date 欄位，其格式是 DateTimeField。

#models.py

class Article(models.Model):
 """文章模型"""

 title = models.CharField('標題',max_length=200,db_index=True)
 pub_date = models.DateTimeField('釋出時間',null=True)

表單

#forms.py

#forms.py
class ArticleForm(forms.ModelForm):
 class Meta:
 model = Article
 exclude = （）

檢視和 URLConf

#views.py

class ArticleCreateView(CreateView):
 model = Article
 form_class = ArticleForm
 template_name = 'blog/article_form.html'

#urls.py

re_path(r'^article/create/$',views.ArticleCreateView.as_view(),name='article_create'),

模板

#template/blog/article_form.html

{% block content %}
 <form action="" method="post" enctype="multipart/form-data">
 {{ form.as_p }}
 {% csrf_token %}
 <p><input type="submit" value="Save content"></p>
 </form>
 </p>
{% endblock %}

此時當你建立文章時，你將看到 pub_date 釋出日期仍然是文字輸入格式，如下圖所示:

接下來就是見證奇蹟的時刻了。你在模板中稍微增加幾行 js 的程式碼，如下所示:

 <form action="" method="post" enctype="multipart/form-data">
 {{ form.as_p }}
 {% csrf_token %}
 <p><input type="submit" value="Save content"></p>
 </form>
 </p>
{% endblock %}
{% block js %}
<!-- XDSoft DateTimePicker -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.min.css" integrity="sha256-DOS9W6NR+NFe1fUhEE0PGKY/fubbUCnOfTje2JMDw3Y=" crossorigin="anonymous" />
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js" integrity="sha256-FEqEelWI3WouFOo2VWP/uJfs1y8KJ++FLh2Lbqc8SJk=" crossorigin="anonymous"></script>
 <script>
$(function () {
 $("#id_pub_date").datetimepicker( {
  format:'Y-m-d H:i',});
 });
 </script>
{% endblock %}

此時你把滑鼠移動到日期輸入欄，美觀的日期和時間選擇器就出現了，如下圖所示：

工作原理

這幾行 Js 的程式碼作用是引入 XDSoft DateTimePicker 的 js 程式碼和 css 樣式，針對 id_pub_date 的表單欄位生成一個 datetimepicker 的例項，並設定輸入日期和時間格式。如果你在模型中 DateTimeField 的欄位名為 visit_date,你只需為 id_visit_date 再生成一個例項即可。Django 的表單會預設為每個輸入欄位 id 加上 id_的字首。

前端基於 JS 的日期和時間選擇器很多，比如 BootstrapDateTimePicker，Fengyuanzhen's DateTimePicker,但 Django 中最簡易方便使用的還是 XDSoft DateTimePicker,強烈推薦。

總結

到此這篇關於Django 如何使用日期時間選擇器規範使用者的時間輸入的文章就介紹到這了,更多相關 Django 如何使用日期時間選擇器規範使用者的時間輸入內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！