新規投稿
フォローする

kintoneでの日付フィールドへ本日より1ヶ月以上後の日付しか選択できないようにする

お世話になっております。

初心者で恐縮なのですが、日付フィールドへ、
今日から1ヶ月以上後の日付しか選択できないようにしたいです。

フォームブリッジでの、フィルタ機能のご紹介が過去にありましたが(https://developer.cybozu.io/hc/ja/community/posts/360016773086-%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0%E3%83%96%E3%83%AA%E3%83%83%E3%82%B8-%E3%81%A7%E6%9C%AC%E6%97%A5%E3%81%8B%E3%82%89%EF%BC%91%E3%83%B6%E6%9C%88%E4%BB%A5%E4%B8%8A%E5%BE%8C%E3%81%AE%E6%97%A5%E4%BB%98%E3%81%97%E3%81%8B%E9%81%B8%E6%8A%9E%E3%81%A7%E3%81%8D%E3%81%AA%E3%81%84%E3%82%88%E3%81%86%E3%81%AB%E3%81%99%E3%82%8B)、

こちらをkintoneで使用するにはどのようにすればよろしいでしょうか。

恐れ入りますがご教授のほどよろしくお願い致します。

0

7件のコメント

Avatar
FM

日付フィールドにバリデーション(入力制限)を付けたいということで合っていますでしょうか?

日付フィールドの入力制限について で似たような話がありましたので、参考にしてみてください。

var threeMonthAgo = moment().add(-3, 'months'); の-3を-1にして、
if(inputDate.isSameOrAfter(threeMonthAgo.format('YYYY-MM-DD'),'day'))...のisSameOrAfterを
isSameOrBeforeに書き換えれば一か月以降ではない日付の場合にエラーにできると思います。

1
Avatar
TAKA

初めまして。

過去記事とほとんど同じような方法で実現可能だと思います。

私も同様の機能を作りましたので、ソースを載せておきます。
参考になりましたら幸いです。

//日付フィールドが変更されたら動作する
kintone.events.on(['app.record.edit.change.日付','app.record.create.change.日付'], function (event) {

var eventDate=event.record.日付.value;
var nowDate=new Date();
if(eventDate){
var eventDay=new Date(eventDate);
var eventStamp=eventDay.getTime();
//一か月後(31日)より前の日付を入力したらエラー
if(eventStamp<nowDate.getTime()+(1000*60*60*24*31)){
console.log("今日の一か月後:",nowDate.getTime()+(1000*60*60*24*31));
event.record.日付.error="本日より一か月以上先の日付を入力してください";
//日付をリセットする
$(".value-xxxxxx").find("input").val("");
}else{
event.record.日付.error=null;
}
}

return event;
});

 

1
Avatar
ていく

FM様

ご連絡が遅くなり、申し訳ございません。

そちらの認識で間違いございません。ご確認ありがとうございます。

過去の記事についてのご紹介につきましても重ねて感謝申し上げます。

 

一度、そちらなど参考にし、作成してみます!

もし分からないことがあれば、こちらに記載させていただきますので、

お忙しいところ恐縮ですが、お時間あります時にアドレス等いただければ幸いです。

0
Avatar
ていく

TAKA様

ご連絡が遅くなり、申し訳ございません。

実際のソースまで教えていただき、ありがとうございます!

 

こちら、参考にさせていだだき一度、機能の作成をさせていただきます!

また、私の知識不足で不明な点等がありましたら、こちらの記事にてご質問させていただくかもしれません。

お忙しいところ恐縮ですが、お時間あります時にご回答いただければ幸いです。

0
Avatar
ていく

TAKA様

お世話になっております。

お忙しいところ恐縮ですが、2点ご質問がございます。

 

▼1点目、日付のリセットについて

先日、教えていただきましたソースを使用させていただきました所、エラーメッセージは表示させることはできました。

ですが、エラーメッセージを無視し、そのまま保存をしてみた所、日付がリセットされておらず、そのまま保存ができてしまいました。

知識不足で大変申し訳ございませんが、原因や解決策などをお教え頂ければ幸いです。

 

▼2点目、ソースについて

知識不足で大変恐縮なのですが、ソースコードでの分からない点をお教えいただけませんでしょうか。

$(".value-xxxxxx").find("input").val("");

こちらのソースコードについて、ご説明いただけますと幸いです。

 

以上でございます。ご多忙のところ申し訳ありませんが

お時間あります時に、ご回答いただけますと幸いです。

 

何卒よろしくお願い申し上げます。

0
Avatar
TAKA

ていく様

ご参考になっているようで幸いでございます。

1点目でリセットが出来ないというご質問ですが、2点目のご質問の箇所、下記ソース部分がリセットを行なっている部分になります。

$(".value-xxxxxx").find("input").val("");

.value-xxxxxxの部分は、編集画面で日付フィールドが設置されているDIVタグのクラスが入ります。
ブラウザで、日付フィールドの周辺のHTMLソースを確認すると、下記のような形になっていると思います。

<div class="control-value-gaia value-xxxxxx" style="overflow: visible;">
 <div class="input-datetime-cybozu">
  <input type="text" class="input-date-text-cybozu">
  <div class="input-time-cybozu"><input type="text" id=":1btime" class="input-time-text-cybozu"></div>
 </div>
</div>

xxxxxxのところには、kintoneで自動採番される数値が入ります。

これを指定することで、日付フィールドに入力されている日付を空にすることが出来ます。
日付フィールドを必須項目に設定しておけば、空のままでは保存できませんので、強制的に一か月後の日付を入力させることが出来るようになります。

※ソースコードはjQueryの記述方法になっています。
 jQueryを使用しない場合は、Javascriptの記述方法に書き直してください。

ご説明が分かりづらい部分がありましたら、またお返事ください。
よろしくお願いいたします。

TAKAにより編集されました
1
Avatar
ていく

TAKA様

お世話になっております。

ご丁寧にありがとうございます。

 

そちら、反映しました所、無事動きました!

感謝申し上げます。

 

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

1
ログインしてコメントを残してください。