溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了Django中使用日期時間選擇器規范用戶的時間輸入的方法，內容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。
如果你的模型中含有 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++FLh3Lbqc8SJk=" 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中使用日期時間選擇器規范用戶的時間輸入的方法有進一步的了解，如果還想學習更多內容，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
