django- 时间选择器的使用方法

1. 让时间成为现择方式 

 

 

---

 

 

1. 引入css 样式  必须在bootstrap css   后面 

 

{% block css %}
    <link rel="stylesheet" href="{% static  'css/bootstrap-datetimepicker.min.css' %}">
{% endblock %}

 

 

2. 引入js 代码 注意存放位置 必须在bootstrap js 后面 

{% block js %}

    <script src="{% static  'js/bootstrap-datetimepicker.js' %}"></script>
    <script src="{% static  'js/bootstrap-datetimepicker.zh-CN.js' %}"></script>
    <script>
        $(function (){
        $('#id_ru_zhi_time').datetimepicker({
            format: 'yyyy-mm-dd',   // 时间输出格式
            minView:2,　　　　　　　　// 输出的时间没有 时 分 秒
            language: 'zh-CN',     // 汉语格式输出
            autoclose:'true',　　　 // 选择时间后 关闭插件
         });
        })
    </script>
{% endblock %}

 

3. 前台代码 

  <div class="form-group">
            <label for="exampleInputEmail1"><span style="color: red">*</span> 入职时间 </label>
            <input type="text" name="ru_zhi_time" class="form-control" required id="id_ru_zhi_time"> <span style="color: red; font-size: small"> </span>
        </div>

modelfrom循环代码 :

{% block content %}
    <h2> 添加学员 </h2>
   <form method="post" novalidate>
        {% csrf_token %}

        {% for item in form %}
        <div class="form-group">
            <label for="exampleInputEmail1"><span style="color: red">*</span> {{ item.label }} </label>
            {{ item }} <span style="color: red; font-size: small">{{ item.errors.0 }} </span>
        </div>
        {% endfor %}

      <button type="submit" class="btn btn-default">提交</button>
   </form>
{% endblock %}

 

代码 云盘下载 :

链接: https://pan.baidu.com/s/19exJHvaOTDY7qLIQ8LWmHg?pwd=yb2n

提取码: yb2n