时间戳

首页 > 解决方案 > 如何修复错误 Uncaught TypeError: $(...).datetimepicker is not a function in script

javascript - 如何修复错误 Uncaught TypeError: $(...).datetimepicker is not a function in script

问题描述

我正在尝试制作注册表单。如何在注册表单中创建出生日期或日期字段？我的脚本不工作。

在此处输入图像描述

这是标签之间的 jQuery CDN

<script src="https://code.jquery.com/jquery-3.6.0.slim.js" integrity="sha256-HwWONEZrpuoh951cQD1ov2HUK5zA5DwJ1DNUXaM6FsY=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>

这是刀片模板

<div class="form-group bmd-form-group">
   <div class="input-group">
      <div class="input-group-prepend">
         <span class="input-group-text"><i class="material-icons">event</i></span>
      </div>
      <input name="date_of_birth" id="date_of_birth" type="text" class="form-control date" placeholder="{{ trans ('global.date_of_birth') }}..." value="{{ old('date_of_birth') }}" required>
   </div>
   @error('date_of_birth')
   <div class="error" for="date_of_birth">{{ $message }}</div>
   @enderror
</div>

这是脚本

<script>
$(document).ready(function() {
    moment.updateLocale('en', {
        week: {
            dow: 1
        } // Monday is the first day of the week
    })

    $('.date').datetimepicker({
        format: 'DD/MM/YYYY',
        locale: 'en',
        icons: {
            up: 'fas fa-chevron-up',
            down: 'fas fa-chevron-down',
            previous: 'fas fa-chevron-left',
            next: 'fas fa-chevron-right'
        }
    })

    $('.datetime').datetimepicker({
        format: 'DD/MM/YYYY HH:mm:ss',
        locale: 'en',
        sideBySide: true,
        icons: {
            up: 'fas fa-chevron-up',
            down: 'fas fa-chevron-down',
            previous: 'fas fa-chevron-left',
            next: 'fas fa-chevron-right'
        }
    })

    $('.timepicker').datetimepicker({
        format: 'HH:mm:ss',
        icons: {
            up: 'fas fa-chevron-up',
            down: 'fas fa-chevron-down',
            previous: 'fas fa-chevron-left',
            next: 'fas fa-chevron-right'
        }
    })
})
</script>

标签： javascriptjquerylaravel

解决方案

首先，您应该添加所有 datetimepicker 库文件

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.css" integrity="sha512-bYPO5jmStZ9WI2602V2zaivdAnbAhtfzmxnEGh9RwtlI00I9s8ulGe4oBa5XxiC6tCITJH/QG70jswBhbLkxPw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js" integrity="sha512-AIOTidJAcHBH2G/oZv9viEGXRqDNmfdPVPYOYKGy3fti0xIplnlgMHUGfuNRzC6FkzIo0iIxgFnr9RikFxK+sw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script><script>

并且只显示您可以关闭时间选择器选项的日期

$('.date').datetimepicker({
    timepicker:false,
    format: 'D/M/Y',
    locale: 'en',
    icons: {
      up: 'fas fa-chevron-up',
      down: 'fas fa-chevron-down',
      previous: 'fas fa-chevron-left',
      next: 'fas fa-chevron-right'
    }
})

你会在这里找到更多关于如何根据你的需要调整它的例子。

推荐阅读