【问题标题】:Get all weekdays of a month when choosing month from jquery ui calender从jquery ui日历中选择月份时获取一个月的所有工作日
【发布时间】:2017-08-24 11:47:01
【问题描述】:

从 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> '));
});

【问题讨论】:

  • 我编辑标题是为了更好地理解你想要什么......你可能会高于编辑,所以你不会得到更多的反对票。另请查看我的新答案:stackoverflow.com/a/45861167/3001970,如果适合您,请确保它是正确的!

标签: javascript jquery calendar


【解决方案1】:

在检查 @Thuhs 答案上的 cmets 后,这里可能会编辑答案。这是一个工作的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>

【讨论】:

  • 您好,很抱歉我提到的错误评论,不是日期选择器,我需要月份选择器,当我选择一个月时,它应该打印出来,感谢您的回复
  • @Praveen 我编辑了答案……那是你要找的吗?
  • 请投票并接受正确答案(meta.stackexchange.com/a/5235/318426)!
【解决方案2】:

下面的 sn-p 将列出所选日期范围内的所有天。我已经删除了 sn-p 的日期选择器引用。您的问题不清楚的是,日期名称是否应该分成几周。

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> '));
});
<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>

【讨论】:

  • 您好 Thijs 感谢您的回复,但只需要选择一个日期选择器,而不是从到现在。
  • 感谢您的回复
  • 很抱歉,这不是您正在寻找的解决方案。我想你遇到的问题我不清楚。我希望其他人能够帮助你。
  • 我需要选择一个月份来打印该月所有星期的天数
  • 不是日期选择器,我需要月份选择器,当我选择一个月时,它应该会打印出来,感谢您的回复
猜你喜欢
  • 2016-08-24
  • 2013-04-17
  • 1970-01-01
  • 2017-07-19
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-02-27
  • 1970-01-01
相关资源
最近更新 更多