Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 109,037

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



 

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

 



Topic : 134387



โพสกระทู้ ( 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






Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2019-10-23 18:14:16 By : kittipan View : 1394 Reply : 7
 

 

No. 1



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

Hall of Fame 2012

สถานะออฟไลน์


กด 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



โพสกระทู้ ( 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



โพสกระทู้ ( 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



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

Hall of Fame 2012

สถานะออฟไลน์


ตอบความคิดเห็นที่ : 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



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

Hall of Fame 2012

สถานะออฟไลน์


ตอบความคิดเห็นที่ : 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
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
 Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

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

Notice

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

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)







Exchange: นำเข้าสินค้าจากจีน, Taobao, เฟอร์นิเจอร์, ของพรีเมี่ยม, ร่ม, ปากกา, power bank, แฟลชไดร์ฟ, กระบอกน้ำ

Load balance : Server 05
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2024 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่