溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

Django中使用日期時(shí)間選擇器規(guī)范用戶的時(shí)間輸入的方法

發(fā)布時(shí)間:2020-07-22 16:46:00 來源:億速云 閱讀:553 作者:小豬 欄目:開發(fā)技術(shù)

這篇文章主要講解了Django中使用日期時(shí)間選擇器規(guī)范用戶的時(shí)間輸入的方法,內(nèi)容清晰明了,對(duì)此有興趣的小伙伴可以學(xué)習(xí)一下,相信大家閱讀完之后會(huì)有幫助。

如果你的模型中含有 datetime 類型的字段,表單中需要用戶輸入日期和時(shí)間,那么你如何保證不同用戶輸入的時(shí)間都遵循一定的格式 (DD/MM/YYYY 或者 YYYY-MM-DD) 是個(gè)必須要考慮的問題。一個(gè)更好的方式是在前端使用日期時(shí)間選擇器 DateTimePicker,以日歷的形式統(tǒng)一選擇輸入時(shí)間,如下圖所示。小編今天將嘗試以最少的代碼教你實(shí)現(xiàn)如何在 Django 項(xiàng)目中實(shí)現(xiàn)日期時(shí)間選擇器 DateTimePicker。

Django中使用日期時(shí)間選擇器規(guī)范用戶的時(shí)間輸入的方法

示范模型

假如我們有如下一個(gè) Article 模型,含有 pub_date 字段,其格式是 DateTimeField。

#models.py

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

 title = models.CharField('標(biāo)題', max_length=200, db_index=True)
 pub_date = models.DateTimeField('發(fā)布時(shí)間', 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 %}

此時(shí)當(dāng)你創(chuàng)建文章時(shí),你將看到 pub_date 發(fā)布日期仍然是文本輸入格式,如下圖所示:

Django中使用日期時(shí)間選擇器規(guī)范用戶的時(shí)間輸入的方法

接下來就是見證奇跡的時(shí)刻了。你在模板中稍微增加幾行 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 %}

此時(shí)你把鼠標(biāo)移動(dòng)到日期輸入欄,美觀的日期和時(shí)間選擇器就出現(xiàn)了,如下圖所示:

Django中使用日期時(shí)間選擇器規(guī)范用戶的時(shí)間輸入的方法

工作原理

這幾行 Js 的代碼作用是引入 XDSoft DateTimePicker 的 js 代碼和 css 樣式,針對(duì) id_pub_date 的表單字段生成一個(gè) datetimepicker 的實(shí)例,并設(shè)置輸入日期和時(shí)間格式。如果你在模型中 DateTimeField 的字段名為 visit_date, 你只需為 id_visit_date 再生成一個(gè)實(shí)例即可。Django 的表單會(huì)默認(rèn)為每個(gè)輸入字段 id 加上 id_的前綴。

前端基于 JS 的日期和時(shí)間選擇器很多,比如 BootstrapDateTimePicker,F(xiàn)engyuanzhen's DateTimePicker, 但 Django 中最簡(jiǎn)易方便使用的還是 XDSoft DateTimePicker, 強(qiáng)烈推薦。

看完上述內(nèi)容,是不是對(duì)Django中使用日期時(shí)間選擇器規(guī)范用戶的時(shí)間輸入的方法有進(jìn)一步的了解,如果還想學(xué)習(xí)更多內(nèi)容,歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI