[分享]laravel安裝vue-datepicker-local日曆美化套件

 3,820 total views,  2 views today

原本想使用jquery UI的Datepicker,但是大大說既然都include vue了,就盡量用vue就好,官網寫安裝很簡單,因為是在純html環境下,如果再laravel要使用,還真碰了些釘子,因此趁還有記憶趕快筆記一下。

先看一下官網範例圖

安裝方法
1. 在laravel根目錄,會自動產生一個 node_modules 目錄

npm install vue-datepicker-local

2.修改 laravel/webpack.mix.js

let mix = require('laravel-mix');
mix.setPublicPath('public/');
mix.js('resources/js/app.js', 'public/js')
   .js('node_modules/vue-datepicker-local/dist/vue-datepicker-local.js','public/js')  
   .copy('node_modules/vue-datepicker-local/dist/vue-datepicker-local.css','public/css')

3.接著跑一下

npm run watch-poll

4.建立一個 blade 模板,範例如下

<!DOCTYPE html>
<html lang="zh-tw">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div class="form-group">
        <label for="SDATE">請選擇搭車日</label>
        <vue-datepicker-local v-model="time" :disabled-date="disabledDate"></vue-datepicker-local>
    </div>
</div>

<script src="{{ mix('/js/vue-datepicker-local.js') }}"></script>
<link rel="stylesheet" href="{{ mix('/css/vue-datepicker-local.css') }}">
<script  type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            time: new Date(),
        },
        methods: {
            disabledDate:function (time) {
                // 這個methods 是在控制停用那些日期不能選擇的。
                let maxday = new Date(2018,10,30);
                // maxday.setDate(maxday.getDate() + 15);
                return time.getTime() < new Date().getTime() || time.getTime() >= maxday ;
            },
        }
    });
</script>
</body>
</html>

這樣就產生結果了美化日曆了

更多官方範例

https://weifeiyue.github.io/vue-datepicker-local/

 

發表迴響

%d 位部落客按了讚: