0

私は本当にこれをどうすればいいのかわかりません。次のように、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. なんらかの理由で、「-1 Month」ボタンは「-1 Week」ボタンの左にレンダリングされます...論理的には、逆になるはずですよね?

  2. 「-1 Week」ボタンをクリックすると、本来の動作が実行されますが、「-1 Month」ボタンをクリックすると、最初に月ボタンのクリック メソッドが起動し、その後すぐに「-1 Week」ボタンのメソッドが起動します (これを確認しました)。 console.log() を使用します。したがって、クリックすると、「開始日」フィールドの値から 1 週間だけ差し引かれているように見えます。

この動作の原因は何ですか?どうすれば修正できますか?

4

1 に答える 1