0

我在 js 中创建了一个 datetimepicker，但是我在向我的 base.html 添加静态标签时遇到了一点问题，如果我这样做了，我不会得到我想要的或者我在我的 js 中写的它只是呈现一个普通的 html，我希望它以一种方式，一旦单击它就会显示我的 js 中所述的日期和时间，这是我尝试过的，除了日期和时间选择器 [ 这是视图] 1外，一切都运行良好

base.html

##标题

 {% load static %}
<html lang="en">
  <head>
    <title>{% block title %}Jazeera{% endblock title %}</title>
    <meta charset="utf-8">
    <meta name="description" content="{% block meta %}welcome to jazeera medical healthcare {% endblock meta %}">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   {% block all %}
    <link href="https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900" rel="stylesheet">
    <link rel="stylesheet" href="{% static 'css/open-iconic-bootstrap.min.css' %}">
  
    <link rel="stylesheet" href="{% static 'css/animate.css' %}">
    
    <link rel="stylesheet" href="{% static 'css/owl.carousel.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/owl.theme.default.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/magnific-popup.css' %}">

    <link rel="stylesheet" href="{% static 'css/aos.css' %}">

    <link rel="stylesheet" href="{% static 'css/ionicons.min.css' %}">
    
    <link rel="stylesheet" href="{% static 'css/flaticon.css' %}">
    <link rel="stylesheet" href="{% static 'css/icomoon.css' %}">
    <link rel="stylesheet" href="{% static 'css/styles.css' %}">
      <link rel="stylesheet" href="{% static 'css/font-awesome.min.css' %}">

  </head>

##页脚

  <script src="{% static 'js/jquery.min.js' %}"></script>
  <script src="{% static 'js/jquery-migrate-3.0.1.min.js' %}"></script>
  <script src="{% static 'js/popper.min.js' %}"></script>
  <script src="{% static 'js/bootstrap.min.js' %}"></script>
  <script src="{% static 'js/jquery.easing.1.3.js' %}"></script>
  <script src="{% static 'js/jquery.waypoints.min.js' %}"></script>
  <script src="{% static 'js/jquery.stellar.min.js' %}"></script>
  <script src="{% static 'js/owl.carousel.min.js' %}"></script>
  <script src="{% static 'js/jquery.magnific-popup.min.js' %}"></script>
  <script src="{% static 'js/aos.js' %}"></script>
  <script src="{% static 'js/jquery.animateNumber.min.js' %}"></script>
  <script src="{% static 'js/scrollax.min.js' %}"></script>
  <script src="{% static 'js/bootstrap-datepicker.js' %}" type="c9dfb692cab9a2d000c13798-text/javascript"></script>
  <script src="{% static 'js/jquery.timepicker.min.js' %}" type="c9dfb692cab9a2d000c13798-text/javascript"></script>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBVWaKrjvy3MaE7SQ74_uJiULgl1JY0H2s&sensor=false"></script>
  <script src="{% static 'js/google-map.js' %}"></script>
  <script src="{% static 'js/main.js' %}"></script>
  <script src="{% static 'js/jquery.js' %}"></script>
  <script src="{% static 'js/jquery.backstretch.min.js' %}"></script>

这是显示的图片

4

2 回答 2

2

检查以下步骤：

1-检查你settings的发现一切都在正确的地方，像这样：

STATIC_URL = '/static/'
STATICFILES_DIRS = (
    os.path.join(BASE_DIR, "static"),
)
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')

2- 使用开发者工具 ( F12) 检查是否加载了静态文件，不要忘记重新启动服务器。

3-确保您用于创建的页面可以datetime访问父模板，以防您继承，如下所示：

other.html

{% extends 'base.html' %}

4-将您的静态文件放在页面顶部的一个块中，base.html然后从其他继承的页面添加到此块（如果您像我在步骤 3 中所说的那样实现）下面可能是一个示例：

base.html

{% block head %}
    .......
{% endblock head %}

other.html

{% block head %}
    <script src="{% static 'js/bootstrap-datepicker.js' %}" type="c9dfb692cab9a2d000c13798-text/javascript"></script>
  <script src="{% static 'js/jquery.timepicker.min.js' %}" type="c9dfb692cab9a2d000c13798-text/javascript"></script>
{% endblock head %}

5-检查您的页面顶部是否有以下内容：

{% load staticfiles %}
{% load static %}

并且不要忘记有些libs依赖必须在调用 other 之前调用libs，调用顺序很重要。

于 2020-06-20T18:15:56.987 回答
0

我做到了，我简单地添加了它，并为它添加了一些我自己的样式

 <script src="{% static 'js/bootstrap-datepicker.js' %}" type="text/javascript"></script>
  <script src="{% static 'js/jquery.timepicker.min.js' %}" type="text/javascript"></script>
于 2020-06-30T23:44:27.773 回答