Datepicker - 按日期激活星期

时间:2016-12-31 20:16:52

标签: javascript php jquery datepicker

如何在jquery datepicker中执行此效果?

我点击项目(例如文本框),其中包含2016-12-28格式的日期。 给定日期的示例是星期三。

我想点击打开一个小日历(datepicker),其中有效 从星期一到星期五只有几天包含这个日期。

2 个答案:

答案 0 :(得分:0)

我调整了答案,以便在给定日期的星期五到达星期五: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>  

答案 1 :(得分:0)

我试着这样:

$('.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" );