날짜와 시간을 모두 처리 할 수있는 괜찮은 jQuery 플러그인을 찾고있었습니다. 핵심 UI DatePicker는 훌륭하지만 불행히도 시간도 필요합니다.
DatePicker가 시간에 따라 작동하는 몇 가지 해킹을 발견했지만 모두 우아하지 않으며 Google은 멋진 것을 보여주지 않습니다.
사용 가능한 인터페이스가있는 단일 UI 컨트롤에서 날짜 및 시간을 선택하기위한 좋은 jQuery 플러그인이 있습니까?
답변:
지금까지 가장 훌륭하고 간단한 DateTime 선택기 옵션은 http://trentrichardson.com/examples/timepicker/ 입니다.
jQuery UI Datepicker의 확장이므로 동일한 테마를 지원할뿐만 아니라 비슷한 방식으로 구문도 비슷하게 작동합니다. 이는 jQuery UI imo와 함께 패키지되어야합니다.
@David, 추천 해 주셔서 감사합니다! @fluid_chelsea, 저는 프로토 타입 대신 jQuery를 사용하고 인터페이스가 많이 개선 된 Any + Time (TM) 버전 3.x를 방금 출시했습니다.
문제가 있으면 내 웹 사이트의 댓글 링크를 통해 알려주십시오!
필자가보기에 날짜와 시간은 사용자가 가장 유용하고 효율적으로 입력 할 수 있도록 두 개의 별도 입력 상자로 처리해야합니다. 사용자가 한 번에 하나의 항목을 입력하도록하는 것이 좋은 원칙입니다 (imho).
핵심 UI DatePicker 및 다음 시간 선택기를 사용합니다.
이것은 Google 캘린더에서 사용하는 것에서 영감을 얻은 것입니다.
jQuery timePicker :
예 :
github의 http://labs.perifer.se/timedatepicker/
프로젝트 : https://github.com/perifer/timePicker
나는 모든 대안 중에서 가장 좋은 것으로 나타났습니다. 사용자는 빠르게 입력 할 수 있고 깔끔해 보이고 간단하며 특정 시간을 분 단위로 입력 할 수 있습니다.
추신 : 내 생각에 : 슬라이더 (일부 대체 시간 선택기가 사용)는 너무 많은 클릭을 가져오고 사용자의 마우스 정밀도가 필요합니다 (입력 속도가 느려짐).
날짜 선택기에 대한 나의 가장 좋은 경험은 프로토 타입 기반 AnyTime 입니다. 나는 그것이 jQuery가 아니라는 것을 알고 있지만 여전히 타협의 가치가 있습니다. 나는 프로토 타입이 전혀 없다는 것을 알고 있으며, 여전히 쉽게 작업 할 수 있습니다.
내가 찾은 한 가지주의 사항 : 일부 브라우저에서는 호환되지 않습니다. 즉, Chrome에서 최신 버전의 프로토 타입에서는 작동하지 않았습니다.
나는 최근에 이것을 조사했지만 적절한 시간 선택기를 포함하는 적절한 날짜 선택기를 아직 찾지 못했습니다 . 내가 사용한 것은 eyecon의 멋진 DatePicker 였고 시간에 대한 두 가지 간단한 드롭 다운이있었습니다. 그래도 Timepickr.js 를 사용하고 싶었지만 정말 좋은 접근법처럼 보입니다.
나는 같은 문제에 부딪쳤다. 실제로 서버 측 프로그래밍을 사용하여 개발했지만 빠른 검색을 수행하여 도움을 요청했습니다.
괜찮아 보입니다. 소스를 너무 많이 보지 않았지만 순수한 JavaScript 인 것 같습니다.
보세요 :
http://www.rainforestnet.com/datetimepicker/datetimepicker.htm
데모 페이지 링크는 다음과 같습니다.
http://www.rainforestnet.com/datetimepicker/datetimepicker-demo.htm
행운을 빕니다
이것은 사용자가 하나의 datetimepicker를 선택하고 datetime을 설정하고 다른 datetimepicker가 그 시간에 1 분을 추가하도록하는 데 사용하는 코드입니다.
맞춤형 약물 관리를 위해 이것이 필요했습니다 ....
어쨌든, 온라인에서 답변을 찾을 수 없으므로 다른 사람에게 도움이 될 수 있다고 생각했습니다 ...
(적어도 완전한 답변은 아닙니다)
60000이 추가되고 1 분이 추가됩니다. (60 * 1000 밀리 초)
$('.frdtPicker').datetimepicker({
onClose: function(dateText, inst) {
var endDateTextBox = $('.todtPicker');
if (endDateTextBox.val() != '') {
var testStartDate = new Date(dateText);
var testEndDate = new Date(endDateTextBox.val());
if (testStartDate > testEndDate) {
var testStartDate = new Date(dateText).getTime() + 60000;
var testStartDate2 = new Date(testStartDate);
endDateTextBox.datetimepicker('setDate', (new Date(testStartDate2)));
}
}
else {
var testStartDate = new Date(dateText).getTime() + 60000;
var testStartDate2 = new Date(testStartDate);
endDateTextBox.datetimepicker('setDate', (new Date(testStartDate2)));
}
$('.frdtPicker').val(dateText); //endDateTextBox.val());
},
onSelect: function(selectedDateTime) {
var start = $(this).datetimepicker('getDate');
$('.todtPicker').datetimepicker('option', 'minDate', new Date(start.getTime()));
}
});다음 JavaScript 플러그인을 살펴보십시오.
가능한 한 간단하게 만들었습니다. 그러나 아직 초기에 있습니다. 피드백을 개선 할 수 있도록 알려주십시오.
jQuery는 아니지만 JavaScript Date Time Picker 시간이있는 달력에는 잘 작동합니다 .
클릭 이벤트를 팝업으로 묶었습니다.
$(".arrival-date").click(function() {
NewCssCal($(this).attr('id'), 'mmddyyyy', 'dropdown', true, 12);
});다음과 같은 기능을 하나 만듭니다.
function getTime()
{
var date_obj = new Date();
var date_obj_hours = date_obj.getHours();
var date_obj_mins = date_obj.getMinutes();
var date_obj_second = date_obj.getSeconds();
var date_obj_time = "'"+date_obj_hours+":"+date_obj_mins+":"+date_obj_second+"'";
return date_obj_time;
}그런 다음 jQuery UI 날짜 선택기를 다음과 같이 사용합니다.
$("#selector").datepicker( "option", "dateFormat", "yy-mm-dd "+getTime()+"" );그래서 나는 다음과 같은 가치를 얻습니다 : 2010-10-31 12:41:57
원하는 방식으로 작동하는 것을 찾지 못했습니다. 소스를 유지하고 버그가 발생할 때 버그를 수정하고 무료 지원을 제공합니다.
http://www.yart.com.au/Resources/Programming/ASP-NET-JQuery-Date-Time-Control.aspx