Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 109,027

HOME > PHP > PHP Forum > [Laravel] Daterangepicker หา css ไม่เจอ ติดตั้งผ่าน npm

[Laravel] Daterangepicker หา css ไม่เจอ ติดตั้งผ่าน npm

เริ่มหัวข้อใหม่

Syrah

โพสกระทู้ ( 20 )
บทความ ( 0 )

ผมติดตั้ง daterangepicker ผ่าน npm install daterangepicker

ในไฟล์ app.js
window.moment = require('moment');
window.daterangepicker = require('daterangepicker');

create.blade.php

<input type="text" class="form-control is-invalid" name="period_date" required>
$('input[name="period_date"]').daterangepicker();

อาการเป็นแบบนี้

ก่อนคลิก

Tag : PHP, jQuery

Date : 2019-10-23 18:14:16

By : kittipan

View : 1297

Reply : 7

No. 1

Genesis™

โพสกระทู้ ( 4,169 )
บทความ ( 7 )

กด F12 ดู console.log ว่ามันหา library ตัวไหนไม่เจอ
ปกติ Laravel ถ้ามีการ install ผ่าน composer จำเป็นต้องลงทะเบียนผ่าน Provider หรือถ้ามีการ include css หรือ jquery ใน version 5.8 ++ เป็นต้นไป จะใช้ URI ในลักษณะนี้
Code (PHP)

<link href="{{ asset('assets/admin/css/style.css') }}" rel="stylesheet">
<script src="{{ asset('assets/admin/js/libs/jquery.min.js') }}"></script>

หรือเราไม่จำเป็นต้อง install ผ่าน Terminal ก็ได้ ไป Download https://jqueryui.com/datepicker/ ใส่ใน public และอ้างอิงจาก href ข้างต้นได้เลย

การติดตั้งผ่าน Terminal จะไปเน้นเกี่ยวกับระบบ Config มากกว่า Require tools

ประวัติการแก้ไข
2019-10-23 18:38:34

Date : 2019-10-23 18:30:45

By : Genesis™

No. 2

Syrah

โพสกระทู้ ( 20 )
บทความ ( 0 )

ตอบความคิดเห็นที่ : 1 เขียนโดย : Genesis™ เมื่อวันที่ 2019-10-23 18:30:45

รายละเอียดของการตอบ ::

ถ้าใช้ composer หรือ link ผ่าน script มันสามารถ เช็คผ่าน f12 ได้ครับ แต่ในกรณีของผมใช้เป็นตัว npm install มาทำให้ไม่สามารถเช็คผ่าน f12 ได้ เพราะตัว script จะถูก build รวมกับ เป็นไฟล์เดียวกันคือ app.js ,app.sass

Date : 2019-10-24 09:48:37

By : kittipan

No. 3

Syrah

โพสกระทู้ ( 20 )
บทความ ( 0 )

นี้เป็นคำตอบของผมนะครับ

in file ..\resources\sass\app.scss

should import .css

//Daterangepicker
@import "~daterangepicker/daterangepicker.css";

หลังจาก import run ใน command

npm run dev

https://stackoverflow.com/questions/58521283/laravelnpm-i-cant-use-css-daterangepicker/58533520#58533520

Date : 2019-10-24 09:58:45

By : kittipan

No. 5

Genesis™

โพสกระทู้ ( 4,169 )
บทความ ( 7 )

ตอบความคิดเห็นที่ : 3 เขียนโดย : kittipan เมื่อวันที่ 2019-10-24 09:58:45

รายละเอียดของการตอบ ::

แต่ถ้าเป็นผม ผมใช้รูปแบบ คำตอบของ crescast CND หรือ Download เข้า Public โดยตรง ซื้อมันเช็ก Error ได้ด้วยตัวเองได้ง่ายกว่า
- การที่เลือกในรูปแบบ CND เพราะเบากว่า
- และที่ใช้การ Download เข้า Public เพราะสามารถจัดการ Path แยกสัดส่วนระหว่างFont End และ Back End ได้อย่างชัดเจน
แต่ก็แล้วแต่คุณจะเลือก ประสบการเดี๋วมันจะสอนคุณเอง

ประวัติการแก้ไข
2019-10-24 10:43:49

Date : 2019-10-24 10:42:31

By : Genesis™

No. 6

Guest

ตอบความคิดเห็นที่ : 3 เขียนโดย : kittipan เมื่อวันที่ 2019-10-24 09:58:45

รายละเอียดของการตอบ ::

เยี่ยม ถูกต้องแล้วครับ

ของผมก็ทำแบบนี้

Code (JavaScript)

// load external libraries
global.moment = require('moment');
moment.locale('th');

window.Pace = require('./pace');
window.dt = require('datatables.net-bs4');
window.swal = require('sweetalert2');
window.select2 = require('select2');
window.toastr = require('toastr');
window.datetimepicker = require('./bootstrap-datetimepicker');
window.colorpicker = require('bootstrap-colorpicker');

import '../sass/bootstrap-datetimepicker.scss';
import '../sass/select2.scss';
import 'vue-toastr-2/dist/vue-toastr-2.min.css';
import '../sass/bootstrap-colorpicker.scss';

แต่ scss ใน folder sass ก็ import มาจาก node_modules อีกที

bootstrap-colorpicker.scss

// colorpicker
@import '~bootstrap-colorpicker/src/sass/colorpicker';

.colorpicker-bs-popover {
    background-color: #515b65;
}

Date : 2019-10-28 15:38:51

By : ห้ามตอบเกินวันละ 2 กระทู้

No. 7

Guest

ตอบความคิดเห็นที่ : 5 เขียนโดย : Genesis™ เมื่อวันที่ 2019-10-24 10:42:31

รายละเอียดของการตอบ ::

ไม่เอามาโมเองบ้างเลยรึ อย่างปรับสีอะไรเล็กๆ น้อยๆ ให้เข้ากับ theme น่ะ

Date : 2019-10-28 15:42:12

By : ห้ามตอบเกินวันละ 2 กระทู้

No. 9

Genesis™

โพสกระทู้ ( 4,169 )
บทความ ( 7 )

ตอบความคิดเห็นที่ : 7 เขียนโดย : ห้ามตอบเกินวันละ 2 กระทู้ เมื่อวันที่ 2019-10-28 15:42:12

รายละเอียดของการตอบ ::

ก็โมนะครับ ส่วนมากใช้ Load แบบ manually เพื่อจัด path ให้มันชัดเจน ไม่ค่อยได้ใช้ terminal load นอกจาก package config เช่น intervention/image :)

Date : 2019-10-28 15:59:04

By : Genesis™

ค้นหาข้อมูล

แสดงความคิดเห็น

Re : [Laravel] Daterangepicker หา css ไม่เจอ ติดตั้งผ่าน npm

รายละเอียด

เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง

โดย

อีเมล์

บวกค่าให้ถูก