Datepicker - 按日期激活一週

Question

如何在jquery datepicker中實現這種效果？

我點擊該項目（例如。文本框），其中包含格式爲2016-12-28的日期。 給定日期的例子是星期三。

我想點擊打開一個小日曆（日期選擇器），其中活動的 從星期一到星期五隻包含這個日期的日子。

Answer 1

我調整了回答也得到了週五在給定日期的一週：JavaScript - get the first day of the week from current date

首先，獲得一和週五的日期在文本框中的日期。然後設置日期選擇器的最大和最小日期。

見我上JS Fiddle

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> 

<input type="text" id="tbDate" class="datepicker" value="2016-12-28" /> 

<script type="text/javascript"> 
$(document).ready(
    function() { 

    //GET THE DATE FROM THE TEXT BOX 
    var placeholder = $("#tbDate").val(); 
    //MAKE A DATE FROM THE TEXT BOX VALUE 
    d = new Date(placeholder); 

    //MAKE THE TEXT BOX A DATE PICKER 
    $(".datepicker").datepicker({ 
     minDate: x(d), //SET THE MIN ALLOWED DATE FOR YOUR DATE PICKER 
     maxDate: y(d), //SET THE MAX ALLOWED DATE FOR YOUR DATE PICKER 
     numberOfMonths: 2, 
     beforeShowDay: $.datepicker.noWeekends, 
     dateFormat: 'yy-mm-dd' 
    }); 
    }); 

//FIND THE DAYS OF WEEK DESIRED FOR THE WEEK OF GIVEN DATE 
function x(d) { 
    var date = new Date(d); 
    if (date.getDay() > 0) { 
    date.setDate(date.getDate() - (date.getDay() - 1)); 
    return date; 
    } else { 
    return date; 
    } 
} 

function y(d){ 
    var date = new Date(d); 
    if (date.getDay() < 6) { 
    date.setDate(date.getDate() + ((6 - date.getDay()))); 
    return date; 
    } else { 
    return date; 
    } 
} 


</script> 

Answer 2

我嘗試這樣的解決方案：

$('.oz_m_data').click(function() { 
//GET THE DATE FROM THE TEXT BOX 
var placeholder = $(this).val();  
//MAKE A DATE FROM THE TEXT BOX VALUE 
d = new Date(placeholder); 

//MAKE THE TEXT BOX A DATE PICKER 
$(this).datepicker({ 
    minDate: x(d), //SET THE MIN ALLOWED DATE FOR YOUR DATE PICKER 
    maxDate: y(d), //SET THE MAX ALLOWED DATE FOR YOUR DATE PICKER 
    numberOfMonths: 1, 
    beforeShowDay: $.datepicker.noWeekends, 
    dateFormat: 'yy-mm-dd' 

}).datepicker("show");