source

j쿼리 날짜/시간 선택기

factcode 2022. 11. 16. 21:23
반응형

j쿼리 날짜/시간 선택기

날짜와 시간을 모두 처리할 수 있는 괜찮은 jQuery 플러그인을 찾고 있습니다. UI 어 ui UIDatePicker좋긴 한데, 아쉽게도 저도 시간을 낼 수 있어야 해요.

나는 DatePicker와 함께 일할 수 있는 몇 가지 해킹을 찾았지만, 그것들은 모두 꽤 고상해 보이고 구글은 좋은 결과를 내지 못하고 있다.

사용 가능한 인터페이스를 가진 단일 UI 컨트롤에서 날짜와 시간을 선택할 수 있는 jQuery 플러그인이 있습니까?

지금까지의 날짜 선택 옵션 중 가장 적절하고 간단한 것은 http://trentrichardson.com/examples/timepicker/ 입니다.

이는 jQuery UI Datepicker의 확장판이기 때문에 동일한 테마를 지원하며 매우 동일한 방식으로 동작하거나 유사한 구문 등을 지원합니다.이것은 jQuery UI imo와 함께 패키징되어야 합니다.

@David씨, 추천해주셔서 감사합니다!@fluid_chelsea, Any+Time 막 출시했어요.TM) 버전 3.x는 프로토타입이 아닌 jQuery를 사용하며 인터페이스가 대폭 개선되었으므로 이제 귀사의 요구를 충족시키기를 바랍니다.

http://www.ama3.com/anytime/

문제가 있으면 제 웹사이트 댓글링크로 알려주세요!

사용자가 가장 유용하고 효율적으로 입력할 수 있도록 날짜와 시간은 두 개의 개별 입력 상자로 처리해야 합니다.사용자가 한 번에 한 가지씩 입력하도록 하는 것이 좋은 원칙이다, 임호.

코어 UI DatePicker와 아래의 타임피커를 사용하고 있습니다.

이것은 Google 캘린더가 사용하는 것 중 하나에서 영감을 얻었습니다.

jQuery timePicker:
예: http://labs.perifer.se/timedatepicker/
github 프로젝트: https://github.com/perifer/timePicker

나는 그것이 모든 대안 중에서 가장 좋다는 것을 알았다.사용자는 입력이 빠르고 깔끔하며 심플하며 특정 시간을 분 단위로 입력할 수 있습니다.

PS: 제 견해: 슬라이더(일부 대체 타임피커에서 사용)는 클릭 횟수가 너무 많아 사용자로부터 마우스 정밀도가 요구되기 때문에 입력 속도가 느려집니다.

데이트 피커를 사용한 최고의 경험은 프로토타입 기반의 AnyTime을 사용한 것입니다.그게 jQuery가 아닌건 알지만 그래도 자네에겐 타협할 가치가 있을 거야시제품이 전혀 없다는 것도 알고 작업도 여전히 간단합니다.

한 가지 주의사항이 있습니다.일부 브라우저에서는 포워드 호환성이 없습니다.즉, Chrome의 새로운 버전의 프로토타입에서는 동작하지 않았습니다.

덧붙여 Fluid Project에는, Wiki 의 기재가 게재되어 있습니다.여기에는 수많은 날짜 및/또는 시간 피커에 대한 개요가 기재되어 있습니다.

저는 최근에 이것을 조사했지만, 제대로 된 시간표를 포함한 괜찮은 달력표를 아직 찾지 못했습니다.결국 아이콘의 멋진 DatePicker를 사용했고, 두 개의 간단한 드롭다운이 시간을 위해 사용되었습니다.Timepickr.js를 사용하고 싶은 유혹이 있었습니다만, 정말 좋은 어프로치인 것 같습니다.

나는 그 문제에 부딪쳤다.실제로 서버 측 프로그래밍을 사용하여 개발했는데, 당신을 돕기 위해 빠른 검색을 해봤는데 이것을 발견했습니다.

출처를 너무 많이 보지는 않았지만 순전히 JavaScript인 것 같습니다.

보기:

http://www.rainforestnet.com/datetimepicker/datetimepicker.htm

데모 페이지 링크는 다음과 같습니다.

http://www.rainforestnet.com/datetimepicker/datetimepicker-demo.htm

행운을 빌어요

이것은 사용자가 하나의 datetime picker를 선택하고, datetime을 설정하고, 다른 datetime picker가 그 시간에 One Minute를 추가하도록 하기 위해 사용하는 코드입니다.

커스텀 의약품 관리를 위해 이게 필요했는데...

아무튼 인터넷에서 답을 찾을 수 없어서 다른 사람에게 도움이 될 것 같아서...

(최소한 완전한 답변은 아닙니다)

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 플러그인을 확인하십시오.

날짜와 시간이 포함된 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

언급URL : https://stackoverflow.com/questions/1245245/jquery-date-time-picker

반응형