[ JavaScript] 一ヶ月後(nヵ月後)を取得する関数

タイトルのものが欲しくて探したら以下のページにズバリの回答が複数あったのですが、出来れば「2017/2/1」だと「2017/2/28」のように月末を取得して、「2017/2/13」だと「2017/3/12」のように3/13ではなく前日を取れるようにしたかったので変更を少し加えてみました。

参考サイト: Javascript function to add X months to a date

[javascript]
Date.prototype.addMonth = function( m ) {
var d = new Date( this );
var dates = d.getDate();
var years = Math.floor( m / 12 );
var months = m – ( years * 12 );
if( years ) d.setFullYear( d.getFullYear() + years );
if( months ) d.setMonth( d.getMonth() + months );
if( dates == 1 ) {
d.setDate( 0 );
} else {
d.setDate( d.getDate() – 1 );
}
return d;
}
[/javascript]

使い方はこんな感じです。

[javascript]
var d = new Date( ‘2017-04-20’ );
var m = d.addMonth( 1 );
console.log( m );
// Fri May 19 2017 09:00:00 GMT+0900

var d = new Date( ‘2017-04-01’ );
var m = d.addMonth( 1 );
console.log( m );
// Sun Apr 30 2017 09:00:00 GMT+0900
[/javascript]

Bootstrapのデザインを利用してみる

Bootstrap(Twitter Bootstrapではありません!)のデザイン性が非常に優れているので、これを利用してデザインを統一させる方法を書いてます。

サンプル

1.jQuery UIの「spinner」利用時にBootstrapのデザインを反映させます

2.<input type=”file”>のデザインにBootstrapを利用します

HTML

[html]
1.<input type="text" id="txt1">
2.<input type="file" id="file1">
[/html]

JavaScript

[js]
// 1.jQuery UIのspinnerをBootstrap風に
$(‘#txt1’).spinner({
create: function() { bootstrap(‘spinner’, ‘txt1’); }
});

// 2.<input type="file">のデザインをBootstrap風に
bootstrap(‘file’, ‘file1’);

//
// デザインをBootstrapに近づける関数
// bootstrap(type, id)
// type: spinner(jQuery UI) | file(input[type=file]
// id : オブジェクトのID
//
function bootstrap(ui, id) {
if(id == undefined) return;

switch(ui) {
case ‘spinner’:
// jQuery UIの「spinner」を変更
$(‘#’+id)
.focus(function() {
$(this).parent().addClass(‘form-focus’);
})
.blur(function() {
$(this).parent().removeClass(‘form-focus’);
})
.parent().addClass(‘form-control’).css({padding: ‘0’, height: ‘auto’});
break;
case ‘file’:
// input[type=file]を変更
var w = $(‘#’+id).outerWidth();
var htm = ‘<div class="input-group" style="width:’ + w + ‘px">’
+ ‘<span class="input-group-btn">’
+ ‘<button type="button" class="btn btn-default" id="open-‘ + id + ‘"><span class="glyphicon glyphicon-folder-open"></span></button>’
+ ‘</span>’
+ ‘<input type="text" id="file-‘ + id + ‘" class="form-control" readonly style="cursor: pointer">’
+ ‘</div>’;

$(‘#’+id)
.css("display", "none")
.parent().append(htm)
.change(function() {
var file = $(‘#’+id).prop("files")[0];
$("#file-" + id).val(file.name);
});

$("#open-" + id + ", #file-" + id).click(function() {
$("#"+id).click();
$(this).blur();
});
break;
}
}
[/js]

StyleSheet

[css]
.form-focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
[/css]

スタイルシートはBootstrapの「.form-control:focus」をそのままコピーしています。(spinner用)