0

我真的不知道该怎么做。我有两个按钮,彼此相邻,如下所示:

<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 个月”按钮被渲染到“-1 周”按钮的左侧......从逻辑上讲,它应该是相反的方式吗?

  2. 单击“-1 周”按钮会执行应有的操作,但是如果单击“-1 月”按钮首先会触发月份按钮的单击方法,然后立即触发“-1 周”按钮的方法(我验证了这一点使用console.log())。因此,单击它后,它似乎只从“开始日期”字段的值中扣除了一周。

是什么导致了这种行为,我该如何解决?

4

1 回答 1

1

label将您的元素更改为spans 或其他内容。 labels 具有与相关的特殊功能input,这导致了您的问题。

于 2013-10-31T20:22:17.243 回答