年月計算について

お世話になります。

まったくの初心者ですので、ご教授いただければと思い、投稿いたします。

 

雇用保険等の加入期間を計算したく、経過年数を表示するサンプルhttps://developer.cybozu.io/hc/ja/articles/202640900

を参考にしてみたのですが、うまくできません。

やりたいことは、

喪失年月日(日付フィールド)が入力されている場合

喪失年月日から取得年月日(日付フィールド)を計算し、加入期間年月を表示させたい

とういのが目的です。

また、喪失年月日が入力されていない場合は、取得年月日から本日までの年月を計算し、経過年数も表示させたいと思っております。

 

【フィールド名】

取得年月日→JoiningDade

喪失年月日→OutingDate

 

↓↓今のコード↓↓

===================================

jQuery.noConflict();
(function($) {
“use strict”;

// ロケールを初期化
moment.locale(‘ja’);

// 今日までの年月計算
function getYearMonth(dtDate) {

var dtToday = moment();
var dtFrom = moment(dtDate);
var years = 0;
var months = 0;

//入力日が過去日付の場合計算
if (!dtToday.isBefore(moment(dtFrom), ‘day’)) {
years = dtToday.diff(moment(dtFrom), ‘years’);
months = dtToday.diff(moment(dtFrom), ‘months’) % 12;
}
return years + "年 " + months + “ヶ月”;
}

kintone.events.on(“app.record.detail.show”, function(event) {

var record = event.record; // 保存前の画面上のレコード

// 入社年月日
var emJoiningDate = kintone.app.record.getFieldElement(‘JoiningDate’);
// 退職年月日
var emOutingDate = kintone.app.record.getFieldElement(‘OutingDate’);

if (emOutingDate) {

var valJoiningDate = getYearMonth(record[‘OutingDate’][‘value’]);

var emLabel = $(“<label>”);
var emDiv = $(“<span>”);

$(emOutingDate).append($(emDiv));
$(emOutingDate).css({
“width”: (parseInt($(emOutingDate).innerWidth(), 10) + 50) + ‘px’
});

$(emDiv).append($(emLabel));
$(emLabel).html(‘<br>’);
$(emLabel).append(valJoiningDate);

$(emDiv).css({
“color”: ‘blue’
});
}

});
})(jQuery);

===================================

現状、喪失年月日のところに、喪失年月日から本日までの年月が表示されています。

無知でお恥ずかしい限りですが、お力添えいただけないでしょうか…

(具体的なコードがあれば幸いです)

何卒、ご教授の程、宜しくお願い致します。

kommy さん

喪失年月日未入力時は、間が抜けた感じになるので「経過年数」とでも表示したほうがいいかもしれません。

あと項目幅の調整などは目的がよくわかりませんので、調整してください。

 

jQuery.noConflict();
(function($) {
"use strict";

// ロケールを初期化
moment.locale('ja');

// 加入期間計算
function getYearMonth(JoiningDate, OutingDate) {

var dtFrom = moment(JoiningDate);
var dtTo = moment(OutingDate || undefined);
var years = 0;
var months = 0;

if (!dtTo.isBefore(moment(dtFrom), 'day')) {
years = dtTo.diff(moment(dtFrom), 'years');
months = dtTo.diff(moment(dtFrom), 'months') % 12;
}
return years + "年 " + months + "ヶ月";
}

kintone.events.on("app.record.detail.show", function(event) {

var record = event.record;

// 取得年月日
if (record['JoiningDate'].value) {

// 加入期間
var valJoiningDate = getYearMonth(record['JoiningDate'].value, record['OutingDate'].value);

var emLabel = $("<label>");
var emDiv = $("<span>");

// 喪失年月日
var emOutingDate = kintone.app.record.getFieldElement('OutingDate');
$(emOutingDate).append($(emDiv));
$(emOutingDate).css({
"width": (parseInt($(emOutingDate).innerWidth(), 10) + 50) + 'px'
});

$(emDiv).append($(emLabel));
$(emLabel).html('<br>');
$(emLabel).append(valJoiningDate);

$(emDiv).css({
"color": 'blue'
});
}

return event;

});
})(jQuery);

rex0220様

 

ありがとうございます。

できました!!

rex0220様の仰る通り、間が抜けた感じになるので、別場所に表示させることにいたしました。

本当にありがとうございました!!

お世話になります。

度々申し訳ございません。

**rex0220**様にご教授いただきました内容をもとに、表示させる方法から、

フィールド制御をかけフィールド(フィールド名→kanyuu)に入力させるように変更したいと思っております。

 

kintone.events.on("app.record.detail.show", function(event) {

の部分を

kintone.events.on([
'app.record.edit.change.JoiningDate',
'app.record.edit.OutingDate',
'app.record.edit.change.kanyuu',
'app.record.create.change.JoiningDate',
'app.record.create.change.OutingDate',
'app.record.create.change.kanyuu',
'app.record.index.edit.change.JoiningDate',
'app.record.index.edit.change.OutingDate',
'app.record.index.edit.change.kanyuu',
'app.record.edit.show',
'app.record.create.show',
'app.record.index.edit.show'], function (event) {
var record = event.record;
moment.locale('ja');
if (['app.record.create.show', 'app.record.edit.show', 'app.record.index.edit.show'].indexOf(event.type) >= 0) {
// フィールド制御
record.kanyuu.disabled = true;
}

に変更し、


// 喪失年月日
var emOutingDate = kintone.app.record.getFieldElement('OutingDate');
$(emOutingDate).append($(emDiv));
$(emOutingDate).css({
"width": (parseInt($(emOutingDate).innerWidth(), 10) + 50) + 'px'
});

の部分を

// 喪失年月日
var emOutingDate = recode['kanyuu'].value;
$(emOutingDate).append($(emDiv));


色々と情報を探し、試行錯誤してみたのですが、全くうまくできません…。
もう一度お力添えいただけないでしょうか…
何卒、ご教授の程、宜しくお願い致します。

単純に、項目に値を設定するだけなら DOM 操作ではなく、レコードの変更で済みます。

recode['kanyuu'].value = valJoiningDate;
return event;

ただし、レコード詳細画面では最新の経過年数にはなりません。

 

rex0220様

いつも本当にありがとうございます!
ご教授いただきました2つのことを組み合わせて

・資格取得日が入力されており、資格喪失日が入力されていない場合は
スペースフィールドに加入期間を表示させる

・資格取得日と資格喪失日の両方が入力されている場合は
加入期間フィールドに加入期間の値を設定する

というようにはできないかと思い、下記のようにしてみました。
なんとかできているかな?という感じはするのですが、気になる点が数箇所…

①資格取得日を変更するたびに、編集画面スペースフィールドの加入期間がが増えていく
(保存したレコードを編集する場合も同様に出てきます)

②新規登録をする際、資格喪失日を入力しても、スペースフィールドの加入期間が消えない

③保存したレコードを編集する際、資格取得日を変更すると加入期間フィールドの値は変更されるが
資格喪失日を変更しても加入期間の値は変更されない

保存を押してしまえば、上記のことは解決されるので、支障ないといえば無いのですが、
どうしても気になってしまいまして…。
やはり、素人の浅知恵でただつなぎ合わせるだけではうまくできないようです。
どこをどうすれば解決できるか、ご助言頂ければ幸いです。
どうか、宜しくお願い致します。

 

jQuery.noConflict();
(function($) {
“use strict”;

// ロケールを初期化
moment.locale(‘ja’);

// 加入期間計算
function getYearMonth(JoiningDate, OutingDate) {

var dtFrom = moment(JoiningDate);
var dtTo = moment(OutingDate || undefined);
var years = 0;
var months = 0;

if (!dtTo.isBefore(moment(dtFrom), ‘day’)) {
years = dtTo.diff(moment(dtFrom), ‘years’);
months = dtTo.diff(moment(dtFrom), ‘months’) % 12;
}
return years + "年 " + months + “ヶ月”;
}

kintone.events.on([‘app.record.detail.show’,
‘app.record.edit.change.JoiningDate’,
‘app.record.edit.OutingDate’,
‘app.record.edit.change.kanyuu’,
‘app.record.create.change.JoiningDate’,
‘app.record.create.change.OutingDate’,
‘app.record.create.change.kanyuu’,
‘app.record.index.edit.change.JoiningDate’,
‘app.record.index.edit.change.OutingDate’,
‘app.record.index.edit.change.kanyuu’,
‘app.record.edit.show’,
‘app.record.create.show’,
‘app.record.index.edit.show’,
‘app.record.edit.submit’,
‘app.record.create.submit’,
‘app.record.index.edit.submit’], function (event) {

var record = event.record;

// フィールド制御
record.kanyuu.disabled = true;

// 雇用保険資格喪失日が空白だったら
if (!record[‘OutingDate’].value) {

// 取得年月日から本日までの加入期間
var valJoiningDate = getYearMonth(record[‘JoiningDate’].value);

var emLabel = $(“<label>”);
var emDiv = $(“<span>”);

// スペースに期間を表示し、加入期間フィールドは空白にする
var emJoiningDate = kintone.app.record.getSpaceElement(‘KikanDateSpace’);
$(emJoiningDate).append($(emDiv));

$(emDiv).append($(emLabel));
$(emLabel).html(‘<br>’);
$(emLabel).append(valJoiningDate);

$(emDiv).css({
“color”: ‘blue’
});

record[‘kanyuu’].value = ‘’;

}

//雇用保険資格喪失日が空白でなければ
else if (record[‘OutingDate’].value) {

// 取得年月日から喪失年月日までの加入期間
var valOutingDate = getYearMonth(record[‘JoiningDate’].value,record[‘OutingDate’].value);

// 加入期間を加入期間フィールドに値を設定する
record[‘kanyuu’].value = valOutingDate;

}

return event;

});
})(jQuery);

下記のように整理したらいかがでしょうか?

「加入期間」という項目を設けるならば、追加・編集画面での DOM 操作は不要だと思います。

最新の加入期間は、「加入期間」のみに表示します。同じ内容を示す項目は一つにしましょう。

 

詳細画面では、スペースに加入期間を表示するのではなく、「加入期間」をDOM 操作で書き換えます。

 

rex0220様

ありがとうございます!
こういう事でしょうか…?
間違いございましたら、どの部分をどのように修正すれば良いか
ご指摘頂ければ、ありがたく存じます。

jQuery.noConflict();
(function($) {
“use strict”;

// ロケールを初期化
moment.locale(‘ja’);

// 加入期間計算
function getYearMonth(JoiningDate, OutingDate) {

var dtFrom = moment(JoiningDate);
var dtTo = moment(OutingDate || undefined);
var years = 0;
var months = 0;

if (!dtTo.isBefore(moment(dtFrom), ‘day’)) {
years = dtTo.diff(moment(dtFrom), ‘years’);
months = dtTo.diff(moment(dtFrom), ‘months’) % 12;
}
return years + "年 " + months + “ヶ月”;
}

kintone.events.on([‘app.record.edit.show’,
‘app.record.create.show’,
‘app.record.index.edit.show’,
‘app.record.edit.submit’,
‘app.record.create.submit’,
‘app.record.index.edit.submit’], function (event) {

var record = event.record;

// フィールド制御
record.kanyuu.disabled = true;

 //雇用保険資格喪失日が空白でなければ
 if (record[‘OutingDate’].value) {

// 取得年月日から喪失年月日までの加入期間
var valOutingDate = getYearMonth(record[‘JoiningDate’].value,record[‘OutingDate’].value);

// 加入期間を加入期間フィールドに値を設定する
record[‘kanyuu’].value = valOutingDate;

}

// 雇用保険資格喪失日が空白だったら

 if (!record[‘OutingDate’].value) {

// 加入期間を加入期間フィールドに値を設定する
record[‘kanyuu’].value = ‘’;

}

return event;

});

 

kintone.events.on([‘app.record.detail.show’], function(event) {

var record = event.record;

// 雇用保険資格喪失日が空白だったら
if (!record[‘OutingDate’].value) {

// 取得年月日から本日までの加入期間
var valJoiningDate = getYearMonth(record[‘JoiningDate’].value);

var emLabel = $(“<label>”);
var emDiv = $(“<span>”);

// 加入期間に表示
var emJoiningDate = kintone.app.record.getFieldElement(‘kanyuu’);
$(emJoiningDate).append($(emDiv));

$(emDiv).append($(emLabel));
$(emLabel).html(‘<br>’);
$(emLabel).append(valJoiningDate);

$(emDiv).css({
“color”: ‘blue’
});

}

return event;

});
})(jQuery);

こんな感じでいかがでしょうか?

 

jQuery.noConflict();
(function($) {
"use strict";

// ロケールを初期化
moment.locale('ja');

// 加入期間計算
function getYearMonth(JoiningDate, OutingDate) {

var dtFrom = moment(JoiningDate);
var dtTo = moment(OutingDate || undefined);
var years = 0;
var months = 0;

if (!dtTo.isBefore(moment(dtFrom), 'day')) {
years = dtTo.diff(moment(dtFrom), 'years');
months = dtTo.diff(moment(dtFrom), 'months') % 12;
}
return years + "年 " + months + "ヶ月";
}

kintone.events.on(['app.record.edit.show',
'app.record.create.show',
'app.record.index.edit.show',
'app.record.create.change.JoiningDate',
'app.record.edit.change.JoiningDate',
'app.record.index.edit.change.JoiningDate',
'app.record.edit.change.OutingDate',
'app.record.index.edit.change.OutingDate'
], function(event) {
var record = event.record;
// フィールド制御
record.kanyuu.disabled = true;
// 取得年月日から喪失年月日までの加入期間
var valOutingDate = getYearMonth(record['JoiningDate'].value, record['OutingDate'].value);
// 加入期間を加入期間フィールドに値を設定する
record['kanyuu'].value = valOutingDate;
return event;
});


kintone.events.on([
'app.record.edit.submit',
'app.record.create.submit',
'app.record.index.edit.submit'
], function(event) {
var record = event.record;
// 雇用保険資格喪失日が空白だったら
if (!record['OutingDate'].value) {
// 加入期間を加入期間フィールドに値を設定する
record['kanyuu'].value = '';
}
return event;
});


kintone.events.on(['app.record.detail.show'], function(event) {
var record = event.record;
// 雇用保険資格喪失日が空白だったら
if (!record['OutingDate'].value) {
// 取得年月日から本日までの加入期間
var valJoiningDate = getYearMonth(record['JoiningDate'].value);
// 加入期間に表示
var emJoiningDate = kintone.app.record.getFieldElement('kanyuu').getElementsByTagName('span');
$(emJoiningDate).text(valJoiningDate).css({"color": 'blue'});
}
return event;
});
})(jQuery);

rex0220様

 

ありがとうございます!

うまく実装することができました!!

 

お教えいただきましたことを更に勉強し、精進してまいりたいと思います。

また、何かの形でご教授お願いすることあるかと思いますが、

その際はどうぞ宜しくお願い申し上げます。

 

本当にありがとうございました!!