- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
我正在尝试使用 Tempus Dominus Bootstrap4 添加 DateTimePicker。但是我收到以下错误。
我使用 Laravel 作为前端。所以我使用 laravel-mix。
我的 Blade 文件在下面
@extends('layouts.app')
@section('content')
@if((Auth::user()->hasRole('teacher')) || (Auth::user()->hasRole('admin')) || (Auth::user()->hasRole('superadmin')) )
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">{{__("Dashboard")}}</div>
<div class="card-body">
<p>{{ Auth::user()->name }}</p>
<p>{{ $errors->first('JSONerror') }}</p>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<div class="input-group date" id="datetimepicker1" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker1"/>
<div class="input-group-append" data-target="#datetimepicker1" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
</div>
</div>
@else
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Authority Problem</div>
<div class="card-body">
{{__("You do not have the authority to reach this page")}}
</div>
</div>
</div>
</div>
</div>
@endif
@endsection
我的 layouts.app Blade 文件是:
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,600" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link rel="stylesheet" href="{{ asset('css/fullcalendar.css') }}">
</head>
<body>
<div id="app">
<nav class="navbar navbar-expand-md navbar-light navbar-laravel">
<div class="container">
<a class="navbar-brand" href="{{ url('/') }}">
{{ config('app.name', 'Laravel') }}
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Left Side Of Navbar -->
<ul class="navbar-nav mr-auto">
</ul>
<!-- Right Side Of Navbar -->
<ul class="navbar-nav ml-auto">
<!-- Authentication Links -->
@guest
<li><a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a></li>
<li><a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a></li>
@else
<li class="nav-item dropdown">
<a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
{{ Auth::user()->name }} <span class="caret"></span>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
{{ __('Logout') }}
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
@csrf
</form>
</div>
</li>
@endguest
</ul>
</div>
</div>
</nav>
<main class="py-4">
@yield('content')
</main>
</div>
</body>
</html>
我的 app.js 文件:
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
window.Vue = require('vue');
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
Vue.component('example-component', require('./components/ExampleComponent.vue'));
const app = new Vue({
el: '#app'
});
Vue.config.devtools = true;
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
我的 bootstrap.js 文件:
window._ = require('lodash');
window.Popper = require('popper.js').default;
/**
* We'll load jQuery and the Bootstrap jQuery plugin which provides support
* for JavaScript based Bootstrap features such as modals and tabs. This
* code may be modified to fit the specific needs of your application.
*/
try {
window.$ = window.jQuery = require('jquery');
require('bootstrap');
} catch (e) {
alert("JQ is not loaded");
}
/**
* We'll load the axios HTTP library which allows us to easily issue requests
* to our Laravel back-end. This library automatically handles sending the
* CSRF token as a header based on the value of the "XSRF" token cookie.
*/
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
/**
* Next we will register the CSRF Token as a common header with Axios so that
* all outgoing HTTP requests automatically have it attached. This is just
* a simple convenience so we don't have to attach every token manually.
*/
let token = document.head.querySelector('meta[name="csrf-token"]');
if (token) {
window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}
/**
* Echo exposes an expressive API for subscribing to channels and listening
* for events that are broadcast by Laravel. Echo and event broadcasting
* allows your team to easily build robust real-time web applications.
*/
// import Echo from 'laravel-echo'
// window.Pusher = require('pusher-js');
// window.Echo = new Echo({
// broadcaster: 'pusher',
// key: process.env.MIX_PUSHER_APP_KEY,
// cluster: process.env.MIX_PUSHER_APP_CLUSTER,
// encrypted: true
// });
/*
*For fullcalendar and reservation
*/
//import $ from 'jquery';
import 'moment';
import 'fullcalendar';
import 'tempusdominus-bootstrap-4';
import 'moment-timezone';
package.json 文件如下所示。
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.18",
"bootstrap": "^4.0.0",
"cross-env": "^5.1",
"jquery": "^3.3.1",
"laravel-mix": "^2.0",
"lodash": "^4.17.4",
"popper.js": "^1.12",
"vue": "^2.5.7"
},
"dependencies": {
"fullcalendar": "^3.9.0",
"moment": "^2.21.0",
"moment-timezone": "^0.5.14",
"tempusdominus-bootstrap-4": "^5.0.0-alpha18"
}
}
你能帮帮我吗?我花了很多时间解决这个问题。
最佳答案
我更改了 bootstrap.js,它可以正常工作。
global.moment = require('moment');
require('tempusdominus-bootstrap-4');
import 'fullcalendar';
import 'moment-timezone';
关于javascript - Tempus Dominus Bootstrap4 需要 moment.js。 (日期时间选择器),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49580266/
我用 sweetalert2 创建了一个模式输入字段是来自 tempusdominus 的日期选择器小部件但日历显示在模态按钮后面,如下图所示: 我的代码如下: Swal.fire({ titl
我正在使用 bootstrap-tempus-dominus用于我的应用程序中的日期时间选择器。 如何用css改变显示的月份和日期名称的颜色 最佳答案 只需在您的页面中添加下面的自定义样式,它就会按预
我正在尝试通过 Tempus Dominus 使用 datetimepicker但是每当我尝试从移动设备中选择日期时,默认键盘都会打开并隐藏模式。我想阻止它打开。 我已经尝试了一些我在网上找到的变通方
我似乎无法让日期时间选择器工作。当我点击它时,它什么也没做。 我已经从 git 页面将 CDN 值导入到 head 和 JS 中。但是,当我单击该字段时,它什么也没做。我在 Bootstrap 方面不
我在模式窗口中使用 Tempus Dominus Bootstrap-4 日期时间选择器,当用户双击表格的特定行时会显示该窗口: $('#btn_modal').on('click', functio
我正在尝试使用 Tempus Dominus,但它不起作用。我做错了什么? $(function (){ $('#date').datetimepicker(); }); 最佳答案
我正在使用tempus-fugit为了并行执行junit测试。我的测试类包含多个 WebDriver junit 测试 (>20),每个测试持续超过 20-40 秒。 这就是问题: 当我的测试同时触发
我想要做的是将事件日历中的月份和年份设置为 Tempus Dominus 日期选择器。所以主页上有一个大日历,用户可以将月份从11月更改为12月,并在12月创建一个新事件。 用户单击按钮输入新事件后,
我可以选择多个日期,然后将其保存到数据库中。从数据库中读回时,输入字段的值属性中包含所有先前选择的日期: 当页面加载时,您可以看到所有 3 个都被简要列出,但随后只剩下第一个,另外 2 个消失了。
我正在使用这个插件 https://tempusdominus.github.io/bootstrap-4/ 插入日期时间选择器。我会显示时间选择器,显示 24 小时内的时间(即不显示 02:00 P
我很难了解如何将 minDate 设置为当前日期的语法。有办法让我这样设置吗?这是我的代码。 $(function () { // $('#datetimep
我正在尝试使用 Tempus Dominus Bootstrap4 添加 DateTimePicker。但是我收到以下错误。 我使用 Laravel 作为前端。所以我使用 laravel-mix。 我
我正在使用 TempusDominus Bootstrap4 日期时间选择器 ( https://tempusdominus.github.io/bootstrap-4/ )。我在 HTML 中只有
我用过Tempus Dominus Bootstrap 4对于我的日期时间选择器。当用户在输入上输入无效值并聚焦(在组件外部单击)时,会出现Uncaught TypeError:无法读取未定义的属性“
我有一个用于构建 Ubuntu 镜像的 Dockerfile。但每当我运行时 docker build -t ubuntu-test:latest ./Dockerfile 它在控制台上显示以下错误
我是一名优秀的程序员,十分优秀!