Laravel Datepicker Datetimepicker

การใช้งาน DatePicker, DatetimePicker.

 

Download

 

** หาข้อมูลได้จาก https://cdnjs.com/

DatePicker จะมีเพียงวันที่เท่านั้น ดาว์นโหลดข้อมูลได้จากเว็บ

https://github.com/uxsolutions/bootstrap-datepicker

DateTimePicker จะมีวันที่และเวลา

https://github.com/smalot/bootstrap-datetimepicker

 

การตั้งค่า Laravel

Unzip files ที่ดาวน์โหลดได้จากเว็บ แล้วไปเก็บไว้ที่

D:\proj\web\blog\node_modules

เช่น

D:\proj\web\blog\node_modules\bootstrap-datetimepicker

D:\proj\web\blog\node_modules\bootstrap-datepicker

 

แก้ไขไฟล์ D:\proj\web\blog\resources\assets\js\bootstrap.js

window.$ = window.jQuery = require(‘jquery’);

require(‘bootstrap-sass’);

addè require(‘bootstrap-datepicker’);

addè require(‘bootstrap-datetimepicker’);

Run >> sudo npm run dev

 

CSS ไปวางไปที่ folder public

CSS ที่ได้จากการดาวน์โหลด เข้าไปหาใน dist\css

D:\proj\web\blog\public\css

Bootstrap-datepicker3.css

Bootstrap-datetimepicker.css

แก้ไข master.blade.php

D:\proj\web\blog\resources\views\layouts\master.blade.php

<!– Bootstrap core CSS –>

<link href=”/css/app.css” rel=”stylesheet”>

<link href=”/css/bootstrap-datepicker3.css” rel=”stylesheet”>

<link href=”/css/bootstrap-datetimepicker.css” rel=”stylesheet”>

 

The end.

Advertisements
Explore posts in the same categories: Laravel

Tags: , , , , ,

You can comment below, or link to this permanent URL from your own site.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s