daterangepicker의 시간 재설정

Question

우리는 시간 선택 도구가 활성화 된 상태에서 daterangepicker을 프로젝트에 사용하고 있으며 누군가가 날짜 범위를 선택할 때 시간을 재설정하려고합니다. 사용자가 새 날짜 범위 나 시간 범위는 선택한 날짜의 시작으로 다시 재설정 할 선택하면 지금

그리고 :

는 그래서 초기 날짜 및 시간 범위이 같은 선택이있다 (12:00 pm) 및 선택한 날짜의 끝 (오전 11:59) :

소스 코드를 수정하지 않고도이를 달성 할 수있는 방법이 있습니까?

Answer 1

어떻게했는지 알 수는 없지만 jQuery를 사용하는 방법은 그렇게 보일 것입니다. 기본적으로 우리는 apply.daterangepicker과 cancel.daterangepicker을 듣고 처리했습니다. prepareDateRangeControl으로 전화하면 모든 기간 선택 도구가 초기화됩니다. 서버 측 렌더링과 jQuery가 페이지가 렌더링 된 후에 일부 UI 요소를 만지는 것처럼 ASP.NET MVC 프로젝트에서이 방법을 사용했음을 언급했습니다. 각 프로젝트에 대한

function prepareDateRangeControl() { 
    function adjustWidth(control) { 
     control.attr('size', control.val().length); 
    } 

    $(".form-control.daterange").each(function() { 

     $(this).daterangepicker({ 
      autoUpdateInput: false, 
      applyClass: "btn-primary", 
      timePicker: true, 
      timePicker24Hour: true, 

      format: $(this).data("format"), 
      locale: { 
       cancelLabel: "Clear", 
       format: $(this).data("format") 
      }, 
      ranges: { 
       "Today": [moment().startOf("day"), moment().endOf("day")], 
       "Yesterday": [moment().subtract(1, "days").startOf("day"), moment().subtract(1, "days").endOf("day")], 
       "Last 7 Days": [moment().subtract(6, "days").startOf("day"), moment().endOf("day")], 
       "Last 30 Days": [moment().subtract(29, "days").startOf("day"), moment().endOf("day")], 
       "This Month": [moment().startOf("month"), moment().endOf("month")] 
      } 
     }); 

     adjustWidth($(this)); 
    }); 

    $(".form-control.daterange").on("apply.daterangepicker", function (event, picker) { 

     if (picker.startDate.hour() === 0 && picker.startDate.minute() === 0) { 
      if (picker.endDate.hour() === 0 && picker.endDate.minute() === 0) { 

       picker.endDate.hour("23"); 
       picker.endDate.minute("59"); 
      } 
     } 

     var format = $(this).data("format"); 
     var text = picker.startDate.format(format) + " - " + picker.endDate.format(format); 
     picker.element.val(text); 
     adjustWidth($(this)); 
    }); 

    $(".form-control.daterange").on("cancel.daterangepicker", function (event, picker) { 
     picker.element.val(""); 
     adjustWidth($(this)); 
    }); 
} 

, 우리는 또한 ng2-daterangepicker를 사용하지만이 사용 사례는 우리는 당신의 요구 사항으로 시간 선택기를 처리 할 필요가 없습니다. 원래의 라이브러리와 동일한 이벤트를 캡슐화하고 제공하기 때문에 아이디어가 위의 코드와 동일하기를 바랍니다.