표현하고 싶은 것은
몇년 몇월 몇일 몇시~몇시
입니다.
지금은 아래와 같은 코드를 이용해
Copy
<input type="date" name="日時"> <input type="time"> <span>〜</span><input type="time">
아래 이미지와 같이 표현하고 있습니다.

혹시 더 깔끔하게 표시할 수 있는 방법이 있나요?
예를들어 위의 년월일 부분부터 몇시~몇시 까지의 항목을 한 블럭으로 가능하다든가...
좀 더 다른 방법이 있을까 싶어서 문의 드립니다~
더 좋은 방법 없을까요~?
답변 11개 / 댓글 18개
jquery 를 이용해서 시간의 범위를 선택하는 것
http://demos.telerik.com/kendo-ui/timepicker/rangeselection
또다른 예 1
타임 스틱의 range
http://jsfiddle.net/jrweinb/MQ6VT/
예2
http://marcneuwirth.com/blog/2010/02/21/using-a-jquery-ui-slider-to-select-a-time-range/
답변에 대한 댓글 4개
제 질문이 이상했던 것 같은데.. 설명부족...
제가 원하는 내용?은....
예를들어 아래와 같은 식으로 표현할 수 있는가 입니다 ㅠㅠ

답변에 대한 댓글 2개
@nanati
위에 저를비롯한 다른분들이 답변하신 내용으로 값을 받아서
처리를 하면됩니다.
단지 디자인적으로 표현할때,
저 형태를 고집해야한다면
날짜 / 시간 picker 를 뭘로 받을지를 정하시는게 먼저인거 같구요
그후에 전달받아진 값을
input type="hidden"으로 보관해서
받은값이
표기되는 div 등의 영역에
---------------------------
년/월/일 --:-- ~ --:--
----------------------------
이렇게 노출되도록 처리하면되고
시작시간/종료시간영역에 클릭이벤트를 걸어야 하지 않을까 생각됩니다.
차라리 더 정확한 답을 원하시면
원하는결과물의 그림을 올리시고,
소스코드로 표현가능한 범위를 올려놓으시면
다들 해당 이벤트처리 방식을 답을 달아주시지 않을까 싶네요
위에 저를비롯한 다른분들이 답변하신 내용으로 값을 받아서
처리를 하면됩니다.
단지 디자인적으로 표현할때,
저 형태를 고집해야한다면
날짜 / 시간 picker 를 뭘로 받을지를 정하시는게 먼저인거 같구요
그후에 전달받아진 값을
input type="hidden"으로 보관해서
받은값이
표기되는 div 등의 영역에
---------------------------
년/월/일 --:-- ~ --:--
----------------------------
이렇게 노출되도록 처리하면되고
시작시간/종료시간영역에 클릭이벤트를 걸어야 하지 않을까 생각됩니다.
차라리 더 정확한 답을 원하시면
원하는결과물의 그림을 올리시고,
소스코드로 표현가능한 범위를 올려놓으시면
다들 해당 이벤트처리 방식을 답을 달아주시지 않을까 싶네요
답변에 대한 댓글 3개
디자인도 커스텀 해야하는 거죠? 리도님께 이뻐서 좋아요는 눌렀지만..
(삭제함 )
요걸로 써보세요 : )
정정!! 링크잘못올렸네요!
답변에 대한 댓글 2개
흠.. 쓰시겠다면 js부분을 살짝 커스텀해서 form input 안으로 넣어야 할듯 하네요
[code]
.on('submit', (val) => {
events.innerHTML += val.toDate() +'\n';
})
.on('open', () => {
events.innerHTML += 'open\n';
})
.on('close', () => {
events.innerHTML += 'close\n';
});
[/code]
요부분의 val.toDate() 이놈을 input으로 보내면 될겁니다
$("지시자").val(val.toDate());
요로코롬
[code]
.on('submit', (val) => {
events.innerHTML += val.toDate() +'\n';
})
.on('open', () => {
events.innerHTML += 'open\n';
})
.on('close', () => {
events.innerHTML += 'close\n';
});
[/code]
요부분의 val.toDate() 이놈을 input으로 보내면 될겁니다
$("지시자").val(val.toDate());
요로코롬
step 속성으로 스핀 박스의 화살표를 누를 때마다 날짜, 시간을 조절할수 있습니다
답변에 대한 댓글 3개
답변을 작성하려면 로그인이 필요합니다.



datetime이 파이어폭스에서 표시가 안되드라구요...
그래서 그냥 date, time 나눠서 쓰기로 했어여 ㅠ ㅠ 힝