Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                h1.title.is-3 期間を計算


//- 日付の入力補助
mixin inputDateSupport(target)
  .help.input__support
    a.button.is-small.is-rounded(@click=`setToday('${target}')`) 今日

    //- 月の増減
    .field.has-addons
      .control
        a.button.is-small.is-rounded(@click=`calcDate('${target}', 'subtract', 1, 'month')`)
          span.icon
            i.fas.fa-minus
          span 1ヶ月

      .control
        a.button.is-small.is-rounded(@click=`calcDate('${target}', 'add', 1, 'month')`)
          span.icon
            i.fas.fa-plus
          span 1ヶ月

    //- 日の増減
    .field.has-addons
      .control
        a.button.is-small.is-rounded(@click=`calcDate('${target}', 'subtract', 1, 'day')`)
          span.icon
            i.fas.fa-minus
          span 1日
      .control
        a.button.is-small.is-rounded(@click=`calcDate('${target}', 'add', 1, 'day')`)
          span.icon
            i.fas.fa-plus
          span 1日
          
          
mixin inputTimeSupport(target)
  //- 入力補助
  .help.input__support
    a.button.is-small.is-rounded(@click=`setCurrentTime('${target}')`) 現在時刻

    //- 時間指定
    .field.has-addons
      .control
        a.button.is-small.is-rounded(@click=`setTime('${target}', '00:00:00')`) 0:00
      .control
        a.button.is-small.is-rounded(@click=`setTime('${target}', '12:00:00')`) 12:00


    //- 時の増減
    .field.has-addons
      .control
        a.button.is-small.is-rounded(@click=`calcTime('${target}', 'subtract', 1, 'hour')`)
          span.icon
            i.fas.fa-minus
          span 1時間
      .control
        a.button.is-small.is-rounded(@click=`calcTime('${target}', 'add', 1, 'hour')`)
          span.icon
            i.fas.fa-plus
          span 1時間

    //- 分の増減
    .field.has-addons
      .control
        a.button.is-small.is-rounded(@click=`calcTime('${target}', 'subtract', 5, 'minute')`)
          span.icon
            i.fas.fa-minus
          span 5分
      .control
        a.button.is-small.is-rounded(@click=`calcTime('${target}', 'add', 5, 'minute')`)
          span.icon
            i.fas.fa-plus
          span 5分


#app

  //ー 入力
  .calculate.content
    div.input-field
      .input-dates

        //- 開始
        .input-from
          label.label 開始

          //- 日付
          .field
            p.control.has-icons-left
              input.input.input-date.is-medium.is-primary.is-rounded(type="date", placeholder="2020-01-01", v-model="start.date", :readonly="start.isRealtime === true", :class="{ 'is-danger': start.isValidDate === false }")
              span.icon.is-left
                i.fas.fa-calendar

            //- 入力補助
            +inputDateSupport('start')


          //- 時間
          .field
            p.control.has-icons-left
              input.input.input-time.is-medium.is-primary.is-rounded(type="time", step="1", placeholder="00:00:00", v-model="start.time", :readonly="start.isRealtime === true", :class="{ 'is-danger': start.isValidTime === false }")
              span.icon.is-left
                i.fas.fa-clock

            //- 入力補助
            +inputTimeSupport('start')


          .field
            b-switch(type="is-info", v-model="start.isRealtime") いま

        //- 矢印
        .flow-symbol
          span.icon
            i.fas.fa-arrow-right
          span.icon
            i.fas.fa-arrow-down

        //- 終了
        .input-to
          label.label 終了

          //- 日付
          .field
            p.control.has-icons-left
              input.input.input-date.is-medium.is-primary.is-rounded(type="date", placeholder="2020-01-01", v-model="end.date", :readonly="end.isRealtime === true", :class="{ 'is-danger': end.isValidDate === false }")
              span.icon.is-left
                i.fas.fa-calendar

            //- 入力補助
            +inputDateSupport('end')

          //- 時間
          .field
            p.control.has-icons-left
              input.input.input-time.is-medium.is-primary.is-rounded(type="time", step="1", placeholder="00:00:00", v-model="end.time", :readonly="end.isRealtime === true", :class="{ 'is-danger': end.isValidTime === false }")
              span.icon.is-left
                i.fas.fa-clock

            //- 入力補助
            +inputTimeSupport('end')

          .field
            b-switch(type="is-info", v-model="end.isRealtime") いま


      //- アクション
      //- .input-action.content
      
      
  //- 結果
  .result.content(v-show="results.isSuccess === true")
    .result__head
      //- 期間の表示 
      .result__term
        span.is-inline-block
          span.result__term__date.is-size-5 {{ results.term.start.date }}
          span.result__term__time(v-show="results.term.start.time !== ''") {{ results.term.start.time }}
          
        span.is-inline-block.has-text-grey
          i.fas.fa-arrow-right
          
        span.is-inline-block
          span.result__term__date.is-size-5(v-show="results.term.end.date !== ''") {{ results.term.end.date }}
          span.result__term__time(v-show="results.term.end.time !== ''") {{ results.term.end.time }}
        
      a.button.is-light#copy-share-url(:disabled="results.isSuccess === false", :data-clipboard-text="shareURL", :title="shareURL")
        span.icon
          i.fas.fa-link
        span 共有リンクをコピー
      
    ul
      li.result__main(v-if="results.diff.isEqual === false")
        //- マイナスの記号
        span.value__item(v-if="results.diff.isPositive === false")
          span.value -
        
        //- スマホで折り返すことを考慮して、日付と時間をグループにしておく
        //- 日付
        span.is-inline-block
          span.value__item(v-show="results.diff.years > 0")
            span.value {{ results.diff.years }}
            span.unit 年
          span.value__item(v-show="results.diff.months > 0")
            span.value {{ results.diff.months }}
            span.unit ヶ月
          span.value__item(v-show="results.diff.days > 0")
            span.value {{ results.diff.days }}
            span.unit 日
            
        //- 時間
        span.is-inline-block
          span.value__item(v-show="results.diff.hours > 0")
            span.value {{ results.diff.hours }}
            span.unit 時間
          span.value__item(v-show="results.diff.minutes > 0")
            span.value {{ results.diff.minutes }}
            span.unit 分
          span.value__item(v-show="results.diff.seconds > 0")
            span.value {{ results.diff.seconds }}
            span.unit 秒

      //- 差がないとき
      li.result__main(v-else)
        span.value__item
          span.value 0
        
          
    ul
      li
        span.value__item
          span.value {{ results.years.value | toLoaleString }}
          span.name 年
          
      li
        span.value__item
          span.value {{ results.months.value | toLoaleString }}
          span.name ヶ月
          
      li
        span.value__item
          span.value {{ results.weeks.value | toLoaleString }}
          span.name 週
          
      li
        span.value__item
          span.value {{ results.days.value | toLoaleString }}
          span.name 日
          
      li
        span.value__item
          span.value {{ results.hours.value | toLoaleString }}
          span.name 時間
          
      li
        span.value__item
          span.value {{ results.minutes.value | toLoaleString }}
          span.name 分
          
      li
        span.value__item
          span.value {{ results.seconds.value | toLoaleString }}
          span.name 秒
          
    
    .field
      b-switch(type="is-info", v-model="results.isAccurate") .000
        
      
              
            
!

CSS

              
                @import url(https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap);
@import url(https://unpkg.com/tippy.js@4/themes/light.css);

// ブレイクポイント
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
);


html {
  background-color: #fafafa;
}

body {
  padding: 20px;
}


// 入力エリア
.input-field {
  margin-bottom: 1.5rem;
  padding: 1rem;
  background-color: #eeeeee;
  border-radius: 6px;
}


// 日付入力エリア
.input-dates {
  margin-bottom: 1.5rem;
  
  @media (min-width: map_get($grid-breakpoints, md) + 1px) {
    display: flex;
    align-items: center;
  }
}

// 日付、時間の入力
.input-date, 
.input-time {
  
  @media (max-width: map_get($grid-breakpoints, md)) {
    width: 100%;
  }
  
  @media (min-width: map_get($grid-breakpoints, md) + 1px) {
    width: 300px;
  }
  
  &:read-only {
    pointer-events: none;
    background-color: #eeeeee;
  }
}


// 入力補助
.input__support {
  display: flex;
  flex-wrap: wrap;
  
  & > * {
    &:not(:last-child) {
      margin-right: 0.5rem;
    }
  }
}


// 矢印
.flow-symbol {
  
  text-align: center;
  padding: 0.5rem 1rem;
  color: #757575;
  
  .icon {
    
    @media (max-width: map_get($grid-breakpoints, md)) {
      &:nth-child(1) {
        display: none;
      }
    }
    
    @media (min-width: map_get($grid-breakpoints, md) + 1px) {
      &:nth-child(2) {
        display: none;
      }
    }
  }
}


// 結果
.result {
  
  ul {
    list-style-type: none;
    margin-left: 0;
    background-color: #fff;
    
    li {
      padding: 0.5rem 0.75rem;
      
      & + li {
        border-top: solid 1px #e0e0e0;
        margin-top: 0;
      }
    }
  }
}


.result__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}


.result__term {
  & > * {
    &:not(:last-child) {
      margin-right: 0.5rem;
    }
  }
}


.result__term__date,
.result__term__time {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}


.result__main {
  .value__item {

    // 値
    .value {
      font-size: 1.8rem;
    }

    // 単位
    .unit {
      font-size: 1rem;
    }
  }
}


.value__item {
  margin-left: 0.25rem;
  margin-right: 0.25rem;

  // 値
  .value {
    font-size: 1.2rem;
    font-family: 'Noto Sans JP', sans-serif;

    & + .unit {
      margin-left: 0.1rem;
    }
  }

  // 単位
  .unit {
    color: #757575;
    font-size: 1rem;
    font-family: 'Noto Sans JP', sans-serif;

    & + .value {
      margin-left: 0.5rem;
    }
  }
  
  //- 項目名
  .name {
    color: #757575;
    font-size: 1rem;
    margin-left: 0.25rem;
  }
}
              
            
!

JS

              
                // TODO クリップボードから日付を入力


// 入力項目
type InputDate = {
    date: string; // 日
    time: string; // 時
    isRealtime: boolean;  // 現在時間と同期
    isValidDate: boolean; // 日付が正しい?
    isValidTime: boolean; // 時間が正しい?
};

// 日時の文字列
type DateString = {
    date: string;
    time: string;
};

// 結果
type Result = {
    isSuccess: boolean; // 計算した
    isAccurate: boolean;  // 単位別の結果に小数点を表示する
    diff: {
        isEqual: boolean; // 差なし
        isPositive: boolean;   // 正
        years: number;  // 年
        months: number; // 月
        days: number;   // 日
        minutes: number;    // 分
        seconds: number;    // 秒
    };  // 日時の差
    years: {
        isPositive: boolean;    // 正
        value: number;  // 値
    };  // 年
    months: {
        isPositive: boolean;    // 正
        value: number;  // 値
    };  // 月
    weeks: {
        isPositive: boolean;    // 正
        value: number;  // 値
    };  // 週
    days: {
        isPositive: boolean;    // 正
        value: number;  // 値
    };  // 日
    hours: {
        isPositive: boolean;    // 正
        value: number;  // 値
    };  // 時間
    minutes: {
        isPositive: boolean;    // 正
        value: number;  // 値
    };  // 分
    seconds: {
        isPositive: boolean;    // 正
        value: number;  // 値
    };  // 秒
    term: {
        start: DateString,
        end: DateString;
    };  // 期間の表示用
};

// データ
interface Data {
    start: InputDate;
    end: InputDate;
    moments: {
        start: Moment;
        end: Moment;
    };  // 入力された日時をMoment化したもの
    results: Result;
    tickEvent: Event;  // "今"のタイミングを合わせるためのイベント
};


// Vue.use(buefy); // この記述がなくても動く

const initialDate = moment().format('YYYY-MM-DD'); // 初期の日時
const url = 'https://codepen.io/phantom4/full/ewXWEV';   // このページのURL(codepenだとwindow.location.hrefが取得できない)

const data: Data = {
    // 開始
    start: {
        date: initialDate,
        time: '00:00:00',
        isRealtime: false,
        isValidDate: true,
        isValidTime: true
    },
    // 終了
    end: {
        date: initialDate,
        time: '00:00:00',
        isRealtime: false,
        isValidDate: true,
        isValidTime: true
    },
    moments: {
        start: null,
        end: null
    },
    results: {
        isSuccess: false,
        isAccurate: false,
        diff: {
            isEqual: false,
            isPositive: true,
            years: 0,
            months: 0,
            days: 0,
            minutes: 0,
            seconds: 0
        },
        years: {
            isPositive: true,
            value: 0
        },
        months: {
            isPositive: true,
            value: 0
        },
        weeks: {
            isPositive: true,
            value: 0
        },
        days: {
            isPositive: true,
            value: 0
        },
        hours: {
            isPositive: true,
            value: 0
        },
        minutes: {
            isPositive: true,
            value: 0
        },
        seconds: {
            isPositive: true,
            value: 0
        },
        term: {
            start: {
                date: '',
                time: ''
            },
            end: {
                date: '',
                time: ''
            }
        }
    },   // 結果
    tickEvent: new Event('tick')
};

const vm = new Vue({
    el: '#app',
    data,

    mounted: function () {
        // isRealtime = true のときに使用するタイマー
        // 個別にsetIntervalするとタイミングがずれるので、それを合わせるため
        setInterval(() => {
            this.$el.dispatchEvent(this.tickEvent);
        }, 500);
    },

    methods: {
        /**
         * 時間の差を計算する
         *
         * @return { from, to } 開始、終了をmomentにしたもの
         */
        calculate: function () {
            let result = false; // 処理結果

            if (
                this.start.isValidDate
                && this.start.isValidTime
                && this.end.isValidDate
                && this.end.isValidTime
            ) {
                const from = this.start.isValidDate && this.start.isValidTime ? moment(`${this.start.date} ${this.start.time}`, 'YYYY-MM-DD HH:mm:ss') : null;  // 開始
                const to = this.end.isValidDate && this.end.isValidTime ? moment(`${this.end.date} ${this.end.time}`, 'YYYY-MM-DD HH:mm:ss') : null;    // 終了

                if (from !== null && from.isValid() && to !== null && to.isValid()) {
                    const isPositive = to.diff(from) >= 0;   // 正の数値か
                    const isEqual = to.diff(from) === 0;    // 同じ時間か

                    // 分かりやすい形に計算
                    this.results.diff = isPositive ? {
                        isPositive,
                        isEqual,
                        years: to.diff(from, 'years'),
                        months: to.diff(from, 'months') % 12,
                        days: this.diffDays(from, to),  // 日数は計算が必要
                        hours: to.diff(from, 'hours') % 24,
                        minutes: to.diff(from, 'minutes') % 60,
                        seconds: to.diff(from, 'seconds') % 60
                    } : {
                        isPositive,
                        isEqual,
                        years: from.diff(to, 'years'),
                        months: from.diff(to, 'months') % 12,
                        days: this.diffDays(to, from),  // 日数は計算が必要
                        hours: from.diff(to, 'hours') % 24,
                        minutes: from.diff(to, 'minutes') % 60,
                        seconds: from.diff(to, 'seconds') % 60
                    };

                    // 単位別に計算する
                    const params = [
                        'years',
                        'months',
                        'weeks',
                        'days',
                        'hours',
                        'minutes',
                        'seconds'
                    ];

                    // TODO 小数点を含めるかUIで選択させる?
                    params.forEach((param) => {
                        this.results[param] = {
                            isPositive,
                            // value: Math.round(to.diff(from, param, true) * 1000) / 1000   // 小数点第3位で丸める
                            value: to.diff(from, param, this.results.isAccurate)
                        }
                    });

                    result = true;

                    // momentオブジェクトを保持
                    this.moments.start = from;
                    this.moments.end = to;

                    // 表記上の期間を設定する
                    const term = this.getTermForDisplay(from, to);
                    this.results.term.start = term.start;
                    this.results.term.end = term.end;
                }
            }

            if (result === false) {
                // 処理に失敗したのでmomentオブジェクトをクリア
                this.moments.start = null;
                this.moments.end = null;

                // 表記上の期間をクリアする
                this.clearTerm();
            }

            this.results.isSuccess = result;
        },

        /**
         * 開始日時を現在にする
         * 
         */
        toCurrentOfFrom: function () {
            const now = moment();
            this.start.date = now.format('YYYY-MM-DD');
            this.start.time = now.format('HH:mm:ss');
        },

        /**
         * 終了日時を現在にする
         * 
         */
        toCurrentOfTo: function () {
            const now = moment();
            this.end.date = now.format('YYYY-MM-DD');
            this.end.time = now.format('HH:mm:ss');
        },


        /**
         * 今日にする
         * @param target 
         */
        setToday: function (target: 'start' | 'end') {
            this[target].date = moment().format('YYYY-MM-DD');
        },

        /**
         * 現在時間にする
         * @param target 
         */
        setCurrentTime: function (target: 'start' | 'end') {
            this[target].time = moment().format('HH:mm:ss');
        },

        /**
         * 時間を設定する
         * @param target 
         * @param time HH:mm:ss
         */
        setTime: function (target: 'start' | 'end', time: string) {
            // 同期モードをオフにする
            this[target].isRealtime = false;

            this[target].time = time;
        },
        
        /**
         * 日付の操作
         * @param target 開始 or 終了
         * @param calc 増減
         * @param value 数値
         * @param unit 単位
         */
        calcDate: function (target: 'start' | 'end', calc: 'add' | 'subtract', value: number, unit: 'year' | 'month' | 'day') {
            const date = this[target].isValidDate ? moment(this[target].date) : moment();   // 日付を操作するmoment
            // 日付が無効な場合、今日にしておく

            // 同期モードをオフにする
            this[target].isRealtime = false;

            // 計算
            if (calc === 'add') {
                date.add(value, unit);
            }
            else if (calc === 'subtract') {
                date.subtract(value, unit);
            }

            this[target].date = date.format('YYYY-MM-DD');
        },
        
        /**
         * 時間の操作
         * @param target 開始 or 終了
         * @param calc 増減
         * @param value 数値
         * @param unit 単位
         */
        calcTime: function (target: 'start' | 'end', calc: 'add' | 'subtract', value: number, unit: 'hour' | 'minute' | 'second') {
            const date = this[target].isValidTime ? moment(this[target].time, 'HHmmss') : moment();   // 日付を操作するmoment
            // 日付が無効な場合、今日にしておく

            // 同期モードをオフにしておく
            this[target].isRealtime = false;

            // 計算
            if (calc === 'add') {
                date.add(value, unit);
            }
            else if (calc === 'subtract') {
                date.subtract(value, unit);
            }

            // this[target].date = date.format('YYYY-MM-DD');  // 日付も変更していく?
            this[target].time = date.format('HH:mm:ss');
        },

        /**
         * 日付のフォーマットになっているか&日付として有効か
         * 
         * @param date 
         */
        isValidDate: function (date: string): boolean {
            const dateFormat = /^\d{4}(-|\/|\.)\d{2}(-|\/|\.)\d{2}$/; // 日付のフォーマット
            let result = false;

            if (dateFormat.test(date)) {
                const formatted = this.toDateFormat(date);

                if (formatted && moment(formatted, 'YYYY-MM-DD').isValid() === true) {
                    result = true;
                }
            }

            return result;
        },

        /**
         * 時間のフォーマットになっているか&時間として有効か
         * 
         * @param time 
         */
        isValidTime: function (time: string): boolean {
            // ブラウザにより00秒のときに省略されることがある
            const timeFormat = /^\d{2}:\d{2}(:\d{2})?$/; // 時間のフォーマット
            let result = false;

            if (timeFormat.test(time)) {
                const nums = time.match(/\d+/g);    // 数字だけを取り出す
                const hours = Number(nums[0]);  // 時
                const seconds = Number(nums[1]);    // 分
                const minutes = Number(nums[2]) || 0;    // 秒

                if (0 <= hours && hours <= 23 && 0 <= seconds && seconds <= 59 && 0 <= minutes && minutes <= 59) {
                    result = true;
                }
            }

            return result;
        },

        /**
         * 日付っぽいフォーマットを日付に変換する(日付そのもののチェックはしない)
         *
         * @param date
         * @return フォーマットを変更した日付 or null(変換できなかった場合)
         */
        toDateFormat: function (date: string): string | null {
            const dateFormat = /^\d{4,}[^\d]\d{1,2}[^\d]\d{1,2}$/; // 検出する日付のフォーマット
            let result: string | null = null;

            if (dateFormat.test(date)) {
                const nums = date.match(/\d+/g);    // 数字だけを取り出す
                if (nums && nums.length === 3) {
                    const tmp = nums.map((num) => Number(num));    // 数値に変換する
                    const month = tmp[1];   // 月
                    const day = tmp[2]; // 日

                    // 月、日は簡易的にチェックする
                    if ((1 <= month && month <= 12) && (1 <= day && day <= 31)) {
                        // 日付のフォーマットにしてみる
                        result = `${tmp[0]}-${tmp[1]}-${tmp[2]}`;
                    }
                }
            }

            return result;
        },
        
        /**
         * 期間を表示用に最適化する
         * 
         */
        getTermForDisplay (start: Moment, end: Moment): { start: DateString, end: DateString } {
            const now = moment();
            const result = {
                start: {
                    date: '',
                    time: ''
                },
                end: {
                    date: '',
                    time: ''
                }
            };
            const isSameDay = start.format('YYYY/M/D') === end.format('YYYY/M/D');    // 開始日と終了日が同じか

            // 開始の日付
            result.start.date = start.format('YYYY/M/D');

            // 開始の時間
            if (start.format('Hms') !== '000' || isSameDay) {
                // 0秒なら秒を省略
                result.start.time = (start.format('s') !== '0') ? start.format('H:mm:ss') : start.format('H:mm');
            }
            else {
                // 1日以上の差があって、0:00:00 なら時間を省略
            }
            

            // 終了の日付
            if (end.format('YYYY') === start.format('YYYY')) {
                if (isSameDay === false) {
                    // 同じ年は年を省略
                    result.end.date = end.format('M/D');
                }
                else {
                    // 開始日と終了日が同じなら省略
                }
            }
            else {
                result.end.date = end.format('YYYY/M/D');
            }

            // 終了の時間
            if (end.format('Hms') !== '000' || result.end.date === '') {
                // 0秒なら秒を省略
                result.end.time = (end.format('s') !== '0') ? end.format('H:mm:ss') : end.format('H:mm');
            }
            else {
                // 日付があって、0:00:00 なら時間を省略
            }

            return result;
        },

        /**
         * 期間の表示をクリアする
         * 
         */
        clearTerm () {
            this.results.term.start = {
                date: '',
                time: ''
            };
            this.results.term.end = {
                date: '',
                time: ''
            };
        },

        /**
         * 日数の差を計算する
         * 
         * @param from 開始
         * @param to 終了
         */
        diffDays (from: Moment, to: Moment): number {
            const diffMonths = to.diff(from, 'months');   // 開始日時と終了日時の月の差
            const progress = from.clone().add(diffMonths, 'month');  // 月の差の分だけ進めた日時
            
            // TODO 月末をまたぐときに日数が飛ぶことがあるので対策が必要かも
            // でも正解も分からない
            // 2018/02/02 -> 2019/02/01 = 11ヶ月30日
            // 2018/02/28 -> 2019/02/27 = 11ヶ月30日
            // 2018/03/01 -> 2019/02/28 = 11ヶ月27日    // 1日ずつ進めただけなのに日数が違う
            // 2018/03/02 -> 2019/03/01 = 11ヶ月27日

            return to.diff(progress, 'days');   // 1ヶ月未満の日数の差
        },

        /**
         * うるう年か
         * @param year 
         */
        isLeapYear (year: number): boolean {
            return (year >= 4) ? year % 400 === 0 || (year % 100 !== 0 && year % 4 === 0) : false;
        }
    },

    computed: {
        /**
         * 共有URL
         * 
         */
        shareURL: function () {
            return (this.start.isValidDate && this.start.isValidTime && this.end.isValidDate && this.end.isValidTime && this.moments.start && this.moments.end) ? `${url}?from=${this.start.isRealtime ? 'now' : this.moments.start.format('YYYYMMDDHHmmss')}&to=${this.end.isRealtime ? 'now' : this.moments.end.format('YYYYMMDDHHmmss')}` : '';
        }
    },

    watch: {
        'start.date': function (val: string) {
            this.start.isValidDate = this.isValidDate(val); // input type="date"が機能しないMac safari用
            this.calculate();
        },

        'start.time': function (val: string) {
            this.start.isValidTime = this.isValidTime(val);  // input type="time"が機能しないMac safari用
            this.calculate();
        },

        'end.date': function (val: string) {
            this.end.isValidDate = this.isValidDate(val);    // input type="date"が機能しないMac safari用
            this.calculate();
        },

        'end.time': function (val: string) {
            this.end.isValidTime = this.isValidTime(val);   // input type="time"が機能しないMac safari用
            this.calculate();
        },

        'results.isAccurate': function (val: boolean) {
            this.calculate();
        },

        'start.isRealtime': function (val: boolean) {
            // リアルタイムで時間同期
            if (val === true) {
                this.$el.addEventListener('tick', this.toCurrentOfFrom);
            }
            else {
                this.$el.removeEventListener('tick', this.toCurrentOfFrom);
            }
        },

        'end.isRealtime': function (val: boolean) {
            // リアルタイムで時間同期
            if (val === true) {
                this.$el.addEventListener('tick', this.toCurrentOfTo);
            }
            else {
                this.$el.removeEventListener('tick', this.toCurrentOfTo);
            }
        }
    },

    filters: {
        /**
         * 数字を0パディング
         * 
         * @param num 数値
         * @param digits 桁数
         */
        zeroPadding: function (num: number, digits: number) {
            // return String(num).padStart(digits);   // not work for IE11
            return _.padStart(String(num), digits, '0');
        },

        /**
         * 3桁カンマ区切りにする
         * 
         * @param val 
         */
        toLoaleString: function (val: number) {
            return Number(val).toLocaleString();
        }
    }
});


// クエリーを開始&終了に反映させる
const queryParams = {};	//文字列クエリー
const params = window.location.search.replace(/^\?/, '').split("&"); // クエリー
const format = /\d{14}/;    // クエリーと判断するフォーマット(YYYYMMDDHHmmss)

for(let i = 0, l = params.length; i < l; i++) {
    const pair = params[i].split("=");
    queryParams[pair[0]] = pair[1] || "";
}

[{
    key: 'from',
    dest: 'start'
}, {
    key: 'to',
    dest: 'end'
}].forEach(function (item) {
    const param = queryParams[item.key];

    if (param) {
        if (param === 'now') {
            // 現在時間に設定
            vm.$data[item.dest].isRealtime = true;
        }
        else if (format.test(param) === true) {
            // 指定時間に設定
            // momentで日付として正しいか確認しておく
            const date = moment(`${param.substr(0, 4)}-${param.substr(4, 2)}-${param.substr(6, 2)} ${param.substr(8, 2)}:${param.substr(10, 2)}:${param.substr(12, 2)}`, 'YYYY-MM-DD HH:mm:ss');
            if (date.isValid()) {
                vm.$data[item.dest].date = date.format('YYYY-MM-DD');
                vm.$data[item.dest].time = date.format('HH:mm:ss');
            }
        }
    }
});



// 共有URLのコピー
new ClipboardJS('#copy-share-url');

// コピーしたときのツールチップ
tippy('#copy-share-url', {
  content: 'copied!',
  trigger: 'click',
  placement: 'top'
});
              
            
!
999px

Console