내가 매달의 <strong>처음</strong> 및 <strong>세 번째</strong> 수요일을 선택 할 수 있도록하기 위해 노력하고있어는 <a href="https://eonasdan.github.io/bootstrap-datetimepicker/" rel="nofollow noreferrer">Bootstrap Datepicker</a>를 사용하는 경우에만 처음 사용 및 부트 스트랩 날짜 선택기

Question

에서 매월 세 번째 수요일.

지금까지 제가 관리해 온 유일한 방법은 수요일에만 옵션으로 전달하는 것입니다. "첫 번째 및 세 번째"원하는 구성을 옵션으로 전달할 수있는 사람이 누구인지 어떻게 알 수 있습니까?

<script type="text/javascript"> 
    $(function() { 
     $('.bootstrap-date-picker').datetimepicker({ 
      locale: 'fr', 
      daysOfWeekDisabled: [0,1,2,4,5,6], 
      format: "ll", 
      minDate: moment(), 
      icons: 
     }); 
    }); 
</script> 

Answer 1

대신 daysOfWeekDisabled의 단일 날짜를 활성화 enabledDates 옵션을 사용할 수 있습니다.

momentjs를 사용하여 주어진 달의 첫째날과 셋째 수요일에 배열을 반환하는 도우미 함수를 만들 수 있습니다. 예는 here입니다.

dp.update에 대한 수신자를 추가하여 사용자가 월을 변경하면 사용 가능한 날짜 (enabledDates 기능 사용)를 업데이트 할 수 있습니다. 여기

완전한 작동 예 :

function getFirstAndThirdWed(year, month){ 
 
    // Convert date to moment (month 0-11) 
 
    var myMonth = moment({year: year, month: month}); 
 
    // Get first Wednesday of the first week of the month 
 
    var firstWednesday = myMonth.weekday(2); 
 
    // Check if first Wednesday is in the given month 
 
    if(firstWednesday.month() != month){ 
 
     firstWednesday.add(1, 'weeks'); 
 
    } 
 
    // Get 3rd Wednesday of the month 
 
    var third = firstWednesday.clone().add(2, 'weeks'); 
 
    return [firstWednesday, third]; 
 
} 
 

 
$('.bootstrap-date-picker').datetimepicker({ 
 
    locale: 'fr', 
 
    useCurrent: false, 
 
    enabledDates: getFirstAndThirdWed(moment().year(), moment().month()), 
 
    format: "ll", 
 
    minDate: moment().startOf('day'), 
 
}).on("dp.update", function (e) { 
 
    if(e.viewDate){ 
 
    var enabledDates = getFirstAndThirdWed(e.viewDate.year(), e.viewDate.month()); 
 
    $('.bootstrap-date-picker').data("DateTimePicker").enabledDates(enabledDates); 
 
    } 
 
});

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/> 
 
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css" rel="stylesheet"/> 
 

 
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/locale/fr.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script> 
 

 
<div class="form-group"> 
 
    <div class='input-group date bootstrap-date-picker'> 
 
     <input type='text' class="form-control"/> 
 
     <span class="input-group-addon"> 
 
     <span class="glyphicon glyphicon-calendar"></span> 
 
     </span> 
 
    </div> 
 
</div>

---

현재 날짜가 매월 첫 번째 수요일 때 문제를 방지하기 위해 minDate 옵션 추가 startOf('day') 당신은 선택하려고 그것.