Laravel/vueのちょっとした事の覚え書き。Laravel 8.xで作業した際の情報。
日付のフォーマット
日付表示のフォーマットにはmomentを使うのでmomentを入れておく。
npm install moment -S
vue内で日付をフォーマット表示。momentをimportし、filterで日時データのフォーマットを記述。itemのupadted_atに日時情報が入っているとした例。
//処理内
import moment from 'moment';
export default {
filters: { moment: function(date) {
if (!date) return "N/A";
return moment(date).format('YY/MM/DD HH:mm')}},
//html内
{{ item.updated_at | moment }}
日数表示
日付間の日数表示。時間を0時前後に調整して日数を計算する。
//gpitemのenddateとstartdateに日付データがあり、その差分を返す関数。単純に差分だと１日減るので時間を始まりと終わりに合わせて2分足す。
datediff(gpitem){
var ed = moment(gpitem.enddate, 'YYYY.MM.DD HH:mm').endOf('day').add(2,'minute');
return ed.diff(moment(gpitem.startdate, 'YYYY.MM.DD 0:00').startOf('day'), "days");
},
//html内
（{{ datediff(groupitem) }}日
https://stackoverflow.com/questions/59441417/how-to-calculate-between-dates-in-laravel-vue-js-project
https://stackoverflow.com/questions/17691202/round-up-round-down-a-momentjs-moment-to-nearest-minute
https://www.wakuwakubank.com/posts/606-javascript-moment/
範囲内判定
日付が範囲内か判定する。moment-rangeを使う。
npm install moment-range --save
itemのstartdateとenddateに日付データがあり、今日がその範囲内かで色を変更する。
import Moment from "moment";
import { extendMoment } from 'moment-range';
const moment = extendMoment(Moment);
colorcurrent(item){
var st = moment(item.startdate, 'YYYY.MM.DD 0:00').startOf('day');
var ed = moment(item.enddate, 'YYYY.MM.DD HH:mm').endOf('day');
if (moment.range(st, ed).contains(new Date()))
return "bg-blue-500";
return "bg-gray-500";
},
データの日付ソート
modelでデータの更新日時をソートして返す。
public function items_bydate(){
return $this->hasMany(item::class)->orderBy('updated_at', 'desc');
}
datepickerのマーキング
vuejs-datepickerで祝日をマーキングする。
resources/js/components/にholiday.jsを作成しそこにちまちま対象日の判定を入れる。2021年7月22日と23日を祝日にする例。
const data = {
days: [6, 0],
customPredictor: function (date) {
if (date.getYear() + 1900 == 2021) {
if (date.getMonth() + 1 == 7) {
if (date.getDate() == 22) return true;
else if (date.getDate() == 23) return true;
}
}
},
}
export default data;
表示側。
datesだとうまく日付がハイライトされないのでcumstomPredictorを使う
日付選択はselectedだと選択した日付が古いデータになるのでwatchを使う
//html
<div class="ml-2 flex"><vuejs-datepicker
:highlighted="highlighted"
:value="new Date()"
v-model="d_selected"
:inline="true"></vuejs-datepicker>
</div>
//スクリプト
import vuejsDatepicker from "vuejs-datepicker";
import holidays from './holiday.js'
import { ja } from "vuejs-datepicker/dist/locale";
vuejsDatepicker.props.language.default = () => ja;
data() {
return {
highlighted: holidays,
watch: {
d_selected: function() {
this.selectedDate();
},
},
selectedDate(){
console.log(this.d_selected);
}
https://github.com/charliekassel/vuejs-datepicker/issues/119
