私は本当にこれをどうすればいいのかわかりません。次のように、2 つのボタンが隣り合って配置されています。
<div class="half">
<label class="half">
End Date:
<div class="btn_contain">
<input type="button" id="btnWeek" value="-1 Week" /><!-- THIS ONE... -->
<input type="button" id="btnMonth" value="-1 Month" /><!-- ...AND THIS ONE -->
</div>
<input type="date" id="txtEndDate" name="end" value="<?php echo date('Y-m-d', strtotime('-1 day')); ?>" />
</label>
<label class="half">
Start Date:
<div class="btn_contain">
<input type="button" id="btnToday" value="Today" />
</div>
<input type="date" id="txtStartDate" name="start" value="<?php echo date('Y-m-d'); ?>" />
</label>
</div>
要素の CSS は次のとおりです。
.half {display:block;}
.half:nth-child(even) {float:right; margin-right:0;}
.half:nth-child(odd) {float:left;}
.btn_contain {float:right;}
input[type="date"] {width:100%; display:block;}
そして今、JavaScriptのために:
formatEndDate = function(date){
var day = ('0' + date.getDate()).slice(-2);
var month = ('0' + (date.getMonth() + 1)).slice(-2);
var year = date.getFullYear();
$('#txtEndDate').val(year + '-' + month + '-' + day);
}
$('#btnWeek').click(function(){
var lastWeek = new Date();
lastWeek.setDate(lastWeek.getDate() - 7);
formatEndDate(lastWeek);
});
$('#btnMonth').click(function(){
var lastMonth = new Date();
lastMonth.setMonth(lastMonth.getMonth() - 1);
formatEndDate(lastMonth);
});
さて、ここでの問題は次のとおりです。
なんらかの理由で、「-1 Month」ボタンは「-1 Week」ボタンの左にレンダリングされます...論理的には、逆になるはずですよね?
「-1 Week」ボタンをクリックすると、本来の動作が実行されますが、「-1 Month」ボタンをクリックすると、最初に月ボタンのクリック メソッドが起動し、その後すぐに「-1 Week」ボタンのメソッドが起動します (これを確認しました)。 console.log() を使用します。したがって、クリックすると、「開始日」フィールドの値から 1 週間だけ差し引かれているように見えます。
この動作の原因は何ですか?どうすれば修正できますか?