0

StartTime と EndTime の 2 つのドロップダウンリストがあり、30 分間隔で時刻を入力します。ユーザーが新しい StartTime を選択したときに、EndTime を StartTime より 1 時間遅く設定しようとしています。

私のモデル:

model.Times = new[]
{
new SelectListItem{ Text="12:00 AM", Value = "12:00 AM" },
new SelectListItem{ Text="12:30 AM", Value = "12:30 AM" },
new SelectListItem{ Text="1:00 AM", Value = "1:00 AM" },
etc
}

私のcshtml：

@Html.DropDownListFor(x => x.StartTime, Model.Times, new {  @id = "ddlStartTime"})
@Html.DropDownListFor(x => x.EndTime, Model.Times, new {  @id = "ddlEndTime"})

次のように、EndTime ドロップダウンリストを StartTime ドロップダウンリストと同じに設定できます。

$("#ddlStartTime").change(function () {                
    var selectedValue = $(this).val();
    $('#EndTime').val(newDateObj);
});

しかし、EndTime を 1 時間後に設定するにはどうすればよいでしょうか。(StartTime が 11:00 PM と 11:30 PM の場合も処理します)

ご協力いただきありがとうございます

4

2 に答える 2

1

この JQuery を使用して時間を追加します。リファレンスを参照してください

$('#startTime').keyup(function(){
if(/[0-9]{2}\:[0-9]{2}/.test($(this).val())){
    var startTime = $(this).val().split(':');
    var endHours = parseInt(startTime[0]) +1;
    endHours = Math.min(Math.max(endHours, 1), 24);
    $('#endTime').val(endHours +':'+ startTime[1]);
  }
});
于 2013-06-26T05:35:37.200 に答える
0

これは最もクリーンなコードではないかもしれませんが、これで終わりです。JavaScript を使用Dateして、24 時間前後の時刻の変換を支援できます。

var selectedValue = "1:00 AM";
var hours, minutes, endDate, endDateString, ampm;

hours = selectedValue.split(':')[1].substring(3, 5) == "AM" ? parseInt(selectedValue.substring(0, 2)) : parseInt(selectedValue.substring(0, 2)) + 12;
minutes = parseInt(selectedValue.split(':')[1].substring(0, 2));
endDate = new Date(0, 0, 0, hours + 1, minutes, 0, 0);

if (endDate.getHours() >= 12) {
    ampm = "PM";
    hours = endDate.getHours() - 12;
}
else {
    ampm = "AM";
    hours = endDate.getHours();
}
if (hours === 0) {
    endDateString = 12;
}
else {
    endDateString = hours < 10 ? '0' + hours.toString() : hours.toString();
}
endDateString += endDate.getMinutes() < 10 ? ':0' + endDate.getMinutes() + ' ' + ampm : ':' + endDate.getMinutes() + ' ' + ampm;

の周りのコードは少し荒いですが、.splitそれを行う方法の一般的なアイデアを理解し、コードを独自に微調整する必要があります。

ここでテスト目的のフィドルを見つけることができます。

于 2013-06-26T06:12:59.750 に答える