좋은 자바 스크립트 시간 선택기는 무엇입니까? [닫은]


86

jquery 또는 독립형 js에 적합한 시간 선택기는 무엇입니까? 15 분 간격으로 일반적인 시간 드롭 다운이 있거나 시간을 수동으로 입력하고 유효성을 검사하는 캘린더에서 Google과 같은 것을 사용하고 싶습니다.


스핀 버튼과 매우 간단한 시간 선택기 여기에
om39a

13
질문을 다시 여는 것이 좋습니다. 모든 범주와 마찬가지로 '건설적이지 않은'범주에는 예외가 있어야한다는 점을 인식하는 것이 중요합니다. 이러한 질문에 대한 대답은 프로그래밍 지식이 필요하고 쉽게 조사 할 수있는 것이 아닌 경우 포함한다고 생각합니다.
Dan Nissenbaum

답변:


74

57
... 그리고 그들 중 미인이 아닙니다
Rudu

3
TimeDatePicker은 아마 최고의 하나입니다.
JD Stuart

9
TimeDatePicker가 선택 목록보다 어떻게 개선되었는지 실제로 알지 못합니다.
Jon z

4
대부분의 도서관은 깨진
FOOBAR


26

이것은 http://trentrichardson.com/examples/timepicker/ 까지 내가 찾은 최고입니다.


2
응용 프로그램에 따라 이것은 내가 가장 좋아하는 것 중 하나입니다. 그래도 분 단계 기간을 1에서 15로 변경해야했지만 매우 쉬웠습니다.
Chris Dutrow

목록에서 내가 가장 좋아하는. 쉽고 간단하며 필요한 것입니다. 이전에 Any + Time ™ Datepicker / Timepicker AJAX 캘린더 위젯을 사용해 보았지만 대신 사용해 보겠습니다.
Daniel

웹 사이트 (및 자바 스크립트 예제)는 더 이상 사용할 수 없습니다. 다른 곳에 샘플이 있습니까?
James Moberg 2014 년

2
슬라이더는 정확한 시간을 선택하는 가장 쉽고 빠른 방법이 아닙니다.
mpen 2014-04-04

@Mark 귀하의 의견에 동의합니다. 가장 간단한 방법은 목록을 선택하거나 사용자가 입력 할 수 있도록 계산기 패드를 표시하는 것입니다.
Felix


8

제안 된 시간 선택 도구가 마음에 들지 않았기 때문에 Perifer와 HTML5 사양에서 영감을 받아 직접 만들었습니다.

http://github.com/gregersrygg/jquery.timeInput

당신이 중 하나를 사용할 수있는 새로운 HTML5 속성 시간을 입력한다 (단계, 최소, 최대)를 들어, 또는 옵션의 객체를 사용 :

<input type="time" name="myTime" class="time-mm-hh" min="9:00" max="18:00" step="1800" />
<input type="time" name="myTime2" class="time-mm-hh" />

<script type="text/javascript">
    $("input[name='myTime']").timeInput(); // use default or html5 attributes
    $("input[name='myTime2']").timeInput({min: "6:00", max: "15:00", step: 900}); // 15 min intervals from 6:00 am to 3:00 pm
</script>

다음과 같이 입력을 확인합니다.

  • 누락 된 경우 ":"삽입
  • 유효한 시간이 아니십니까? 공백으로 교체
  • 단계에 따라 유효한 시간이 아닙니까? 가장 가까운 단계로 반올림 / 내림

HTML5 사양은 am / pm 또는 현지화 된 시간 구문을 허용하지 않으므로 hh : mm 형식 만 허용합니다. 사양에 따라 초가 허용되지만 아직 구현하지 않았습니다.

매우 "알파"이므로 버그가있을 수 있습니다. 나에게 패치 / 풀 요청을 보내 주시기 바랍니다. IE 6 & 8, FF, Chrome 및 Opera에서 수동으로 테스트했습니다 (후자의 경우 Linux에서 최신 안정).


1
사용 가능한 데모가 있습니까?
mpen 2014-04-04

죄송합니다. 나는 4 년 동안 그 프로젝트를 건드리지 않았다. 풀 요청을 보내 주시기 바랍니다 :)
gregers

6

여기에서 jQuery 작성자 John Resig의 게시물을 읽을 수 있습니다. http://ejohn.org/blog/picking-time/ .


4
일반 사용자에게는 너무 많은 마우스 정밀도를 사용합니다. (그가 "직관적"이라고 주장 했음에도 불구하고) 그 것을 사용하는 방법이 당장 명백하지 않습니다. 나는 그것을보고 그 숫자 위에 마우스를 올려 놓았을 때 어떻게 작동할지 알 수 없습니다.
mpen 2014-04-04

4

나는 ClockPick을 사용 하고 있습니다.


나쁘지는 않지만 요소 위치 지정이 꺼져 있습니다.
mpen 2014-04-04

이로 인해 플래시 업데이트를 요청하는 비린내 페이지가 표시되었습니다. 링크를 확인하고 업데이트하십시오.
lets0code

3

CSS 갤러리 에는 다양한 시간 선택기가 있습니다. 보세요.

Perifer Design의 시간 선택기 는 Google과 유사합니다.


1
Ah Perifer는 정확히 내가 찾고있는 것이지만 유효성 검사를 수행하지 않는 것 같습니다. 즉, "999999999"를 값으로 입력 할 수 있습니다
Element

3

누군가 다른 JavaScript TimPicker에 관심이있는 경우 작업을 수행하는 jQuery 플러그인을 개발하고 유지 관리합니다. EZ Time JS와 같은 방식으로 작동합니다 (5 분 전까지는 몰랐지만 : D). 사용자가 편안하게 느끼는 거의 모든 방식으로 시간을 입력하고 입력을 공통 형식으로 변환 할 수 있습니다.

체크 아웃 jQuery를 TimePicker 옵션 페이지를 행동에서 볼 수 있습니다.


데모가 손상되었습니다 (또는 사용 방법을 이해하지 못했습니다!).
PhiLho

1

미안합니다 .. 조금 늦었 나봐요 .. 노 그레이써 왔어요 .. 멋지네요 ..


4
누군가 (원본 포스터가 필요하지 않음)가 유용하다고 생각하기에 너무 늦지 않았습니다. .. ... NoGray 가 이미 CMS에서 언급 된 것을 제외하고 ...
awe


-1

NoGray는 멋진 눈 사탕이지만 몇 가지 사용성 고려 사항이 있습니다. 첫째, 아날로그 시계는 점점 더 모호 해지고 있으며 젊은 사람들은 때때로 시계를 읽는 데 어려움을 겪습니다. 둘째, 슬라이더를 사용하는 시간 선택기와 마찬가지로 마우스로 특정 시간으로 드래그하는 것은 약간 지루합니다. 셋째,이 선택기에 대한 키보드 상호 작용은 약간 산발적입니다.

더 유용한 시간 선택 도구는 Any + Time ™ Datepicker / Timepicker AJAX 캘린더 위젯을 확인하십시오 . 간단한 버튼을 사용하여 빠르고 쉽게 특정 시간을 선택하기 때문에 사용 가능한 가장 빠르고 사용하기 쉬운 시간 선택 도구 일 것입니다.

사용성에 대한 흥미로운 테스트는 다음과 같습니다. 이상한 시간 (예 : 10:32 pm)을 선택한 다음 다양한 시간 선택기를 사용하여 해당 시간을 정확하게 선택하는 데 걸리는 시간을 확인합니다. Any + Time ™을 사용하면 시간을 직접 적는 것보다 더 빨리 할 수 ​​있습니다. 다른 선택기를 찾아보세요! 말할 것도없이 Any + Time ™은 수많은 다양한 날짜 / 시간 형식, 12/24 시간제, 전체 CSS (또는 jQuery UI) 사용자 지정 및 시간대까지 지원합니다!


좋은 선택기. 비상업적 용도로 무료로 사용할 수 있지만 상용 프로젝트의 라이선스 비용에 대해서는 개발자에게 문의해야합니다.
Andrew Lewis

6
그가 개발자 인 경우에만 발생합니다.
steve_c 2010-12-14

분에 대해 10 초와 1 초를 따로 선택할 필요가 없습니다. 그렇게 많은 정밀도가 거의 필요하지 않습니다. 10과 1을 결합하고 5 분 단위로 12 행을 만듭니다. 시간에 맞춰 더 빠르고 더 빠르고 대부분의 사용 사례에 충분합니다. 해당 버튼 위로 마우스를 가져갈 때 커서를 손 / 포인터로 변경하는 것을 고려할 수도 있습니다.
mpen 2014-04-04

피드백을 주셔서 감사합니다! 저는 현재 선택이 필요하지 않을 때 더 적은 수의 버튼을 자동으로 제공하는 대체 라이브러리를 작업 중입니다.
Andrew M. Andrews III

any + time 페이지에는 수천 줄의 텍스트와 코드가 있지만 페이지에서 날짜 / 시간 선택기의 작동 예제 데모를 하나 찾을 수 없습니다. 한숨 ... 어떤 종류의 데모가 어딘가에.
Heriberto Lugo
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.