jquery UI datepicker-多选功能

时间:2018-04-16 12:20:44

标签: jquery-ui jquery-ui-datepicker

我有一个日期选择器。当我选择日期时,也应该自动选择接下来的两天。总共应该选择3个工作日。 我试过下面的代码,但它没有用。

$('.date-pick').datePicker({
    createButton:false,
    displayClose:true,
    closeOnSelect:false,
    selectMultiple:true,
    numSelectable:3
});

1 个答案:

答案 0 :(得分:0)

您的帖子未包含有关输出或选择过程的详细信息。以下是您的评论示例:

$(function() {
  function dayNumOfWeek(d) {
    var week = {
      "Sun": 0,
      "Mon": 1,
      "Tue": 2,
      "Wed": 3,
      "Thu": 4,
      "Fri": 5,
      "Sat": 6,
    }
    return week[d];
  }

  $(".date-pick").datepicker({
    showButtonPanel: true,
    closeText: "Close",
    beforeShowDay: $.datepicker.noWeekends,
    onSelect: function(dt) {
      var myDays = [
        new Date(dt),
        new Date(dt),
        new Date(dt)
      ];
      var dow = myDays[0].getDay();
      var dp = $(".date-pick");
      console.log("Selected: " + dow + "/7, " + dt, myDays);

      switch (dow) {
        case 1:
        case 2:
        case 3:
          console.log("mtw");
          myDays[1].setDate(myDays[1].getDate() + 1);
          myDays[2].setDate(myDays[2].getDate() + 2);
          break;
        case 4:
          console.log("rfm");
          myDays[1].setDate(myDays[1].getDate() + 1);
          myDays[2].setDate(myDays[2].getDate() + 4);
          break;
        case 5:
          console.log("fmt");
          myDays[1].setDate(myDays[1].getDate() + 3);
          myDays[2].setDate(myDays[2].getDate() + 4);
          break;
      };
      var fDT = [];
      console.log("Format Dates");
      var mm, dd, yy;
      for (var i = 0; i < 3; i++) {
        console.log(i, myDays[i]);
        mm = myDays[i].getMonth() + 1;
        dd = myDays[i].getDate();
        yy = myDays[i].getFullYear();
        mm = (mm < 10 ? "0" + mm : mm);
        dd = (dd < 10 ? "0" + dd : dd);
        fDT[i] = mm + "/" + dd + "/" + yy;
      };
      console.log("Formatted:", fDT);
      dp.val(fDT.join(", "));
      return false;
    }
  });
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

Select Date: <input type="text" class="date-pick" />

当您进行选择时,您可以通过onSelect管理在文本中接收日期的内容。由于您正在处理一周中的工作日,星期一到星期几,您希望确保选择接近星期末和月末的日期来正确计算接下来的几天。

转换为JavaScript Date类型,您可以利用大量工具来计算未来几天没有问题。你有3个场景:周一,周二,周三。 1,Thur,Fri,Mon as 2,Fri,Mon,Tue 3。

当您进行选择时,它会选择工作周的下两天。