Program Resource

開発者向け各種コード、アルゴリズム、リソース情報ライブラリ もしくはねふぁの覚え書き

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に日付データがあり、その差分を返す関数。単純に差分だと1日減るので時間を始まりと終わりに合わせて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

Print Friendly, PDF & Email