Datepicker - 按日期激活星期答案

【问题标题】：Datepicker - Activation of the week by dateDatepicker - 按日期激活星期
【发布时间】：2016-12-31 20:16:51
【问题描述】：

jquery datepicker中如何实现这个效果？

我单击项目（例如文本框），其中包含格式为 2016-12-28 的日期。给定日期的示例是星期三。

我想点击打开一个小日历（datepicker），其中活动的只有周一到周五的日子包含此日期。

【问题讨论】：

哪个 jQuery 日期选择器？？
是的，如果您使用的是特定插件，请列出它，我会调整解决方案。谢谢！

标签： javascript php jquery datepicker

【解决方案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>

【讨论】：

你怎么知道 OP 正在使用什么插件？
我没有。我想我应该问的。但听起来他不知道如何将日期选择器添加到文本框，也不知道如何设置它的选项。我只是假设开箱即用的 jQuery-UI 和 JS 作为一个整体将为他提供一个可用的解决方案。
我更新了脚本以解决一个错误，即如果星期几为 0（星期日），脚本会因使最大日期小于最小日期而中断。
感谢您的帮助。我没有写日期是从循环中按时间顺序生成的文本框中选择的，例如：2017-01-03 2017-01-10 2017-01-17 2017-01-24 等。所以我认为变量“ placeholder" 必须是一个类，而不是一个 id。
我只是用一个占位符来展示一个值。你可以随心所欲地填充它。

【解决方案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" );

【讨论】：

如何将 noWeekends 更改为“仅周末”？