文字列取得してDate型に変換して整形する(javascript)

datepickerの{format: 'yyyy/mm/dd'}オプションを使って、日付の表示を整形している部分があったのですが、検索実行したりリロードしたりすると、'00:00:00 +0900'という余分な部分が表示されてしまっておりました。

 

直したいと思い、まずtext_fieldに対して日付のフォーマットを整えるオプションがあるかなと思い調べたのですがよくわからずでした。

rubyのstrftimeメソッドを使って、'Timeクラスのオブジェクト.strftime('yyyy/mm/dd')' で整形できるという情報はたくさん出てきたのですが、今回の場合はやりづらそうでしたのでjsで整形することにしました。

 

$(document).ready(function() {
$(".datepicker").datepicker({ format: 'yyyy/mm/dd'});   //datepicker使用&format指定


let date_gteq = $("#q_created_at_gteq").val();        // 日付取得して代入
let date_lteq = $("#q_created_at_lteq_end_of_day").val();

if (date_gteq != "") {
let date = new Date(date_gteq);  // Date型に変換 
let yyyy = date.getFullYear(); // 年の部分代入
let mm = date.getMonth() + 1; if (mm < 10) {mm = '0' + mm;}   // 月の部分代入
let dd = date.getDate(); if (dd < 10) {dd = '0' + dd;}      // 日の部分代入
let new_date_gteq = yyyy + '/' + mm + '/' + dd;          // yyyy/mm/ddに整形
$("#q_created_at_gteq").val(new_date_gteq)             // 値を入れ替える
}
if(date_lteq != "") {
let date = new Date(date_lteq);
let yyyy = date.getFullYear();
let mm = date.getMonth() + 1; if (mm < 10) {mm = '0' + mm;}
let dd = date.getDate(); if (dd < 10) {dd = '0' + dd;}
let new_date_lteq = yyyy + '/' + mm + '/' + dd;
$("#q_created_at_lteq_end_of_day").val(new_date_lteq)
}
})
;

 

 

これでリロードしても検索実行しても、yyyy/mm/dd というフォーマットのままでいてくれるようになりました!

 

 

その他追記

なんでgetMonth()は +1 しなきゃいけないんだ。。。?と思い少し調べてみました。

以下の記事がとても参考になりました!!

bps-tomoya.hateblo.jp