부트 스트랩 Datepicker에서 선택 가능한 기간을 제한하는 방법은 무엇입니까?

Question

선택 가능한 날짜를 제한하는 옵션을 제공하는 datepicker를 사용해야합니다. 우리는 minDate, maxDate 옵션을 사용하여 지원하는 데 사용되는 jQuery UI를 사용하고있었습니다.

$("#id_date").datepicker({minDate: +1, maxDate: '+1M +10D'}); 

최근에 우리는 우리의 스타일에 트위터 부트 스트랩을 사용하기 시작했습니다. 그리고 분명히 트위터 부트 스트랩은 jQuery UI 스타일과 호환되지 않습니다. 그래서 http://www.eyecon.ro/bootstrap-datepicker/에서 사용할 수있는 부트 스트랩 호환 datepickers 중 하나를 사용하여 시도했다.

위의 플러그인은 jQuery UI의 datepicker만큼 구성 할 수 없습니다. 누군가가 새로운 datepicker에서 선택 가능한 날짜 범위를 제한하는 것을 도와 줄 수 있습니까?

Answer 1

부트 스트랩 날짜 표시기는 날짜 범위를 설정할 수 있습니다. 그러나 초기 릴리스/마스터 지점에서는 사용할 수 없습니다. 지점을 '범위'로 확인하거나 (단지 https://github.com/eternicode/bootstrap-datepicker 참조), startDate 및 endDate로 간단히 수행 할 수 있습니다.

예 : 선택 날짜와

$('#datepicker').datepicker({ 
    startDate: '-2m', 
    endDate: '+2d' 
}); 

Answer 2

은이 같은 것을 사용하는 것이 좋습니다 범위. 내 솔루션 #to_date보다 큰 #from_date 선택 방지하고 변경의 startDate 사용자가 #from_date 상자에 새 날짜를 선택 할 때마다 #to_date :

http://bootply.com/74352

JS 파일 :

var startDate = new Date('01/01/2012'); 
var FromEndDate = new Date(); 
var ToEndDate = new Date(); 

ToEndDate.setDate(ToEndDate.getDate()+365); 

$('.from_date').datepicker({ 

    weekStart: 1, 
    startDate: '01/01/2012', 
    endDate: FromEndDate, 
    autoclose: true 
}) 
    .on('changeDate', function(selected){ 
     startDate = new Date(selected.date.valueOf()); 
     startDate.setDate(startDate.getDate(new Date(selected.date.valueOf()))); 
     $('.to_date').datepicker('setStartDate', startDate); 
    }); 
$('.to_date') 
    .datepicker({ 

     weekStart: 1, 
     startDate: startDate, 
     endDate: ToEndDate, 
     autoclose: true 
    }) 
    .on('changeDate', function(selected){ 
     FromEndDate = new Date(selected.date.valueOf()); 
     FromEndDate.setDate(FromEndDate.getDate(new Date(selected.date.valueOf()))); 
     $('.from_date').datepicker('setEndDate', FromEndDate); 
    }); 

HTML :

를

<input class="from_date" placeholder="Select start date" contenteditable="false" type="text"> 
<input class="to_date" placeholder="Select end date" contenteditable="false" type="text" 

또한 부트 스트랩 datepicker.js와 .css 파일을 반드시 포함시켜야합니다.

Answer 3

위 예제는 약간 단순화 할 수 있습니다. 또한 datepicker를 통해서만 선택하는 대신 키보드에서 수동으로 날짜를 입력 할 수 있습니다.

JS 파일 : 값을 삭제하면 당신은 startDate를/endDate가 경계를 제거 행동 'clearDate에'도 을 처리 할 필요가

$(".from_date").datepicker({ 
    format: 'yyyy-mm-dd', 
    autoclose: true, 
}).on('changeDate', function (selected) { 
    var startDate = new Date(selected.date.valueOf()); 
    $('.to_date').datepicker('setStartDate', startDate); 
}).on('clearDate', function (selected) { 
    $('.to_date').datepicker('setStartDate', null); 
}); 

$(".to_date").datepicker({ 
    format: 'yyyy-mm-dd', 
    autoclose: true, 
}).on('changeDate', function (selected) { 
    var endDate = new Date(selected.date.valueOf()); 
    $('.from_date').datepicker('setEndDate', endDate); 
}).on('clearDate', function (selected) { 
    $('.from_date').datepicker('setEndDate', null); 
}); 

HTML :

<input class="from_date" placeholder="Select start date" type="text" name="from_date"> 
<input class="to_date" placeholder="Select end date" type="text" name="to_date"> 

Answer 4

대부분의 답변 및 설명 endDate 또는 startDate의 유효한 문자열이 무엇인지 설명하지 않아야합니다. Danny는 우리에게 두 가지 유용한 예를 제시했습니다.

$('#datepicker').datepicker({ 
    startDate: '-2m', 
    endDate: '+2d' 
}); 

하지만 왜 bootstrap-datetimepicker.js에있는 소스 코드를 살펴 보겠습니다. 일부 코드 시작 줄 1343은 어떻게 작동하는지 알려줍니다.

if (/^[-+]\d+[dmwy]([\s,]+[-+]\d+[dmwy])*$/.test(date)) { 
      var part_re = /([-+]\d+)([dmwy])/, 
       parts = date.match(/([-+]\d+)([dmwy])/g), 
       part, dir; 
      date = new Date(); 
      for (var i = 0; i < parts.length; i++) { 
       part = part_re.exec(parts[i]); 
       dir = parseInt(part[1]); 
       switch (part[2]) { 
        case 'd': 
         date.setUTCDate(date.getUTCDate() + dir); 
         break; 
        case 'm': 
         date = Datetimepicker.prototype.moveMonth.call(Datetimepicker.prototype, date, dir); 
         break; 
        case 'w': 
         date.setUTCDate(date.getUTCDate() + dir * 7); 
         break; 
        case 'y': 
         date = Datetimepicker.prototype.moveYear.call(Datetimepicker.prototype, date, dir); 
         break; 
       } 
      } 
      return UTCDate(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(), date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds(), 0); 
     } 

표현식에는 4 가지 종류가 있습니다.

• w는
• m는
• y는
• d이 일을 정규 표현식 ^[-+]\d+[dmwy]([\s,]+[-+]\d+[dmwy])*$에서

봐를 의미 해를 의미한다 달을 의미 주를 의미한다. -0d 또는 +1m 이상 사용할 수 있습니다.

는 .And 분리 , 내가 v3.1.3을 사용하고 [\f\n\r\t\v,]

Answer 5

의 하나가 될 수 열심히 startDate:'+1y,-2m,+0d,-1w' 같은 시도하고 나는 또 다른 가능성이 옵션을 사용하는 것입니다이

var fromE = $("#" + fromInput); 
var toE = $("#" + toInput); 
$('.form-datepicker').datetimepicker(dtOpts); 

$('.form-datepicker').on('change', function(e){ 
    var isTo = $(this).attr('name') === 'to'; 

    $("#" + (isTo ? fromInput : toInput )) 
     .data('DateTimePicker')[ isTo ? 'setMaxDate' : 'setMinDate' ](moment($(this).val(), 'DD/MM/YYYY')) 
}); 

Answer 6

같은 data('DateTimePicker')를 사용했다 data 속성 (예 : 최소 일주일 전) :

<input class='datepicker' data-date-start-date="-1w"> 

더 많은 정보 : http://bootstrap-datepicker.readthedocs.io/en/latest/options.html