jQuery를 사용하여 입력란의 시간을 올바른 형식으로 변경하는 슬라이더를 만들었습니다. 내 View File, Create.aspx에서 다음 jquery 함수를 본문의 시작 부분에 배치하십시오.
<script>
$(function() {
$("#slider").slider({
value: 9,
min: 0,
max: 1440,
step: 15,
slide: function (event, ui) {
var hours = Math.floor(ui.value/60);
var minutes = ui.value - (hours * 60);
var ampm = "AM";
if (hours == 12) { ampm = "PM"; }
else if (hours == 0) { hours = 12; ampm = "AM"; }
else if (hours > 12) { hours = hours - 12; ampm = "PM"; }
if (hours < 10) hours = '0' + hours;
if (minutes < 10) minutes = '0' + minutes;
$("#work_StartTime").val(hours + ':' + minutes + ' ' + ampm);
}
});
});
</script>
다음에 동일한 페이지의 본문에서 시간 입력을 위해 입력란 근처에 div를 놓습니다. 해당 div에 슬라이더가 표시됩니다.
<div class="editor-field">
<%: Html.EditorFor(model => model.work.StartTime)%>
<div id="slider"></div>
<%: Html.ValidationMessageFor(model => model.work.StartTime)%>
</div>
이렇게하면 슬라이더가 생깁니다. 위의 자바 스크립트 코드에서 단계를 변경합니다 : 15, 15 분으로 증가합니다. 이것은 분명히 클라이언트 측 유효성 검사입니다. 물론 서버 측 유효성 검사도 구현해야합니다.