从jquery ui日历中选择月份,获取一个月的所有工作日

时间:2017-08-24 11:47:02

标签: javascript jquery calendar

我希望从Jquery UI日历中选择一个月来获得一个月的所有工作日。

以下是从日期到日期选择的代码,但我需要,当我选择一个月时,它应该打印整个月的所有工作日名称。

eg: monday,tuesday,wednesday,thursday,friday,saturday,sunday
    monday,tuesday,wednesday,thursday,friday,saturday,sunday
    monday,tuesday,wednesday,thursday,friday,saturday,sunday
    monday,tuesday,wednesday,thursday,friday,saturday,sunday

从所选月份的开始日期日期到结束月份。

<input id="from" />
<input id="to" />
<button id="getBetween">Get Between Dates</button>
<div id="results"></div>
$("#from").datepicker();
$("#to").datepicker();    

$('#getBetween').on('click', function () {
    var start = $("#from").datepicker("getDate"),
        end = $("#to").datepicker("getDate"),
        currentDate = new Date(start),
        between = []
    ;

    while (currentDate <= end) {
        between.push(new Date(currentDate));
        currentDate.setDate(currentDate.getDate() + 1);
    }

    $('#results').html(between.join('<br> '));
});

2 个答案:

答案 0 :(得分:1)

在检查@Thuhs答案的评论后,可以编辑答案。这是一个有效的jsfiddle

我们的想法是通过getDay()获取工作日,并从具有星期名称的数组中返回该值。小插件moonth-picker返回该月的第一天。函数new Date(selectedDate.getFullYear(), selectedDate.getMonth() + 1, 0, 23, 59, 59)计算最后一天。

$("#InlineMenu").MonthPicker({
    // SelectedMonth: '04/' + new Date().getFullYear(),
    OnAfterChooseMonth: function(selectedDate) {
    	
      	var currentDate = selectedDate,    	
            lastDayOfMonth = new Date(selectedDate.getFullYear(), selectedDate.getMonth() + 1, 0, 23, 59, 59),         
            weekdays = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],
            between = [];
				
        while (currentDate <= lastDayOfMonth) {
            between.push(weekdays[new Date(currentDate).getDay()]);
            currentDate.setDate(currentDate.getDate() + 1);
        }
        
        $('#results').html(between.join(', '));
        
    }
});
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="//rawgit.com/KidSysco/jquery-ui-month-picker/v3.0.0/demo/MonthPicker.min.css">
<script type="text/javascript" src="//rawgit.com/digitalBush/jquery.maskedinput/1.4.1/dist/jquery.maskedinput.min.js"></script>
<script type="text/javascript" src="//rawgit.com/KidSysco/jquery-ui-month-picker/v3.0.0/demo/MonthPicker.min.js"></script>

<div id='InlineMenu' style="float: left; margin-right: 20px;"></div>
<div id="results" style="padding: 20px;"></div>

答案 1 :(得分:0)

以下代码段将列出所选日期范围的所有日期。我已删除了代码段的日期选择器引用。从你的问题中可以清楚地看出,日期名称是否应该分成几周。

&#13;
&#13;
function getDayName(date) {
  var dayNames = ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'];
  
  return dayNames[date.getDay()];
}


$('#getBetween').on('click', function () {
    var start = new Date($("#from").val()),
        end = new Date($("#to").val()),
        between = [];

    while (start <= end) {
        between.push(getDayName(start));
        start.setDate(start.getDate() + 1);
    }

    $('#results').html(between.join('<br> '));
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
from start date date of a selected month to end month.

<input id="from" value="2017-08-01"/>
<input id="to" value="2017-08-31"/>
<button id="getBetween">Get Between Dates</button>
<div id="results"></div>
&#13;
&#13;
&#13;