javascript - jQuery datePicker 周选择-6ren

javascript - jQuery datePicker 周选择

转载作者：行者123 更新时间：2023-12-02 14:24:27

我有一个 jQueryUI 日期选择器，我试图获取代码来选择所选日期的特定周，它适用于除周日之外的每天。当我选择星期日时，会显示下一周，但它应该显示当前一周。例如，如果我选择 5 月 9 日，则范围为 2016年5月9日至5月15日，但是当我选择第15日时，我得到2016年5月16日至5月22日，当我认为它应该显示相同的范围时，就像我选择了第9个

HTML

<input style="display: none" name="date" type="input" id="datePick"/>
<span>Week Of: </span>
<span style="font-weight: bold" id="weekRange">         
</span>
<br/>
M : <span id="mondayNum"></span>
<br/>
TU : <span id="tuesdayNum"></span>
<br/>
W : <span id="wednesdayNum"></span>
<br/>
TH : <span id="thursdayNum"></span>
<br/>
F : <span id="fridayNum"></span>
<br/>
SA : <span id="saturdayNum"></span>
<br/>
SU : <span id="sundayNum"></span>

JavaScript

$( document ).ready(function()
    {

        //alert(t1);
        $("#datePick").datepicker(
        {
            showWeek:true,
            showOtherMonths: true,
            selectOtherMonths: true,
            firstDay: 1,
            showOn: "button",
            buttonImage: "https://htmlcssphptutorial.files.wordpress.com/2015/09/b_calendar.png",
            buttonImageOnly:true,
            onSelect: function(dateText, inst)
            {
                var dayOne,dayTwo,dayThree,dayFour,dayFive,daySix,daySeven;
                var date = $(this).datepicker('getDate');
                //console.log($.datepicker.iso8601Week(new Date(dateText)));
                tempDay = $.datepicker.formatDate( 'D', date);

                if(tempDay == 'Sun')
                {
                    console.log("Sunday");
                    console.log(date);                  
                    console.log(tempDay);

                dayOne = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 1);
            //  
                dayTwo = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 2);
                dayThree = new Date(date.getFullYear(), date.getMonth(), date.getDate()  - date.getDay() + 3);
                dayFour = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 4);
                dayFive = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 5);
                daySix = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
                daySeven = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 7);
          $('#weekRange').text($.datepicker.formatDate( 'M d', dayOne) + " to " + $.datepicker.formatDate( 'M d, yy', daySeven));
                $('#mondayNum').text($.datepicker.formatDate( 'd', dayOne));
                $('#tuesdayNum').text($.datepicker.formatDate( 'd', dayTwo));
                $('#wednesdayNum').text($.datepicker.formatDate( 'd', dayThree));
                $('#thursdayNum').text($.datepicker.formatDate( 'd', dayFour));
                $('#fridayNum').text($.datepicker.formatDate( 'd', dayFive));
                $('#saturdayNum').text($.datepicker.formatDate( 'd', daySix));
                $('#sundayNum').text($.datepicker.formatDate( 'd', daySeven));
                $("#datePick").datepicker("setDate", dayOne);
        }
                else
                {
                    console.log("Not Sunday");
                    console.log(tempDay);
                previousWeek = ($.datepicker.iso8601Week(date) - 1);
                console.log("Picked day previous Week: " + previousWeek);

                console.log("Current week: " + $.datepicker.iso8601Week(date));

                var nextWeek = ($.datepicker.iso8601Week(date) + 1);
                console.log("Picked day following Week: " + nextWeek);

                console.log(dateText);
                dayOne = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 1);

                dayTwo = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 2);
                dayThree = new Date(date.getFullYear(), date.getMonth(), date.getDate()  - date.getDay() + 3);
                dayFour = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 4);
                dayFive = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 5);
                daySix = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
                daySeven = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 7);
                }



                console.log("2nd: " + dayTwo);
                console.log("3rd: " + dayThree);
                console.log("4th: " + dayFour);
                console.log("5th: " + dayFive);
                console.log("6th: " + daySix);
                console.log("7th: " + daySeven);


                var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;
                //console.log($.datepicker.formatDate( 'M d', monday, inst.settings ) + " to " + $.datepicker.formatDate( 'M d, yy', sunday, inst.settings ));
                $('#weekRange').text($.datepicker.formatDate( 'M d', dayOne, inst.settings ) + " to " + $.datepicker.formatDate( 'M d, yy', daySeven, inst.settings ));
            $('#mondayNum').text($.datepicker.formatDate( 'd', dayOne));
                $('#tuesdayNum').text($.datepicker.formatDate( 'd', dayTwo));
                $('#wednesdayNum').text($.datepicker.formatDate( 'd', dayThree));
                $('#thursdayNum').text($.datepicker.formatDate( 'd', dayFour));
                $('#fridayNum').text($.datepicker.formatDate( 'd', dayFive));
                $('#saturdayNum').text($.datepicker.formatDate( 'd', daySix));
                $('#sundayNum').text($.datepicker.formatDate( 'd', daySeven));
                $("#datePick").datepicker("setDate", dayOne);
                //alert($.datepicker.formatDate( 'd', dayOne, inst.settings ));
            }
        });
        //console.log("1st: " + dayOne);

        $("#datePick").datepicker("setDate", new Date());
        var date = $("#datePick").datepicker('getDate');
        //console.log(test);
        dayOne = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 1);
        dayTwo = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 2);
        dayThree = new Date(date.getFullYear(), date.getMonth(), date.getDate()  - date.getDay() + 3);
        dayFour = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 4);
        dayFive = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 5);
        daySix = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
        daySeven = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 7);
        $('#weekRange').text($.datepicker.formatDate( 'M d', dayOne) + " to " + $.datepicker.formatDate( 'M d, yy', daySeven));


    //console.log("1st: "+ bob);

    });

jsfiddle https://jsfiddle.net/gauldivic/vexuu26j/

最佳答案

由于它总是关闭一天，这可能是由于您将一周的第一天设置为星期一造成的，因此您可以通过从所选日期中减去一天来解决此问题。

var date = $(this).datepicker('getDate');
date = new Date(date.getFullYear(), date.getMonth(), date.getDate() - 1);

实际操作:

var t1;
$(document).ready(function() {
  $("#datePick").datepicker({
    showWeek: true,
    showOtherMonths: true,
    selectOtherMonths: true,
    firstDay: 1,
    showOn: "button",
    buttonImage: "https://htmlcssphptutorial.files.wordpress.com/2015/09/b_calendar.png",
    buttonImageOnly: true,
    onSelect: function(dateText, inst) {
      var dayOne, dayTwo, dayThree, dayFour, dayFive, daySix, daySeven;
      
      // Subtract one day to account for different first day of the week
      var date = $(this).datepicker('getDate');
      date = new Date(date.getFullYear(), date.getMonth(), date.getDate() - 1);
      
      var tempDay = $.datepicker.formatDate('D', date);
      var previousWeek = ($.datepicker.iso8601Week(date) - 1);
      var nextWeek = ($.datepicker.iso8601Week(date) + 1);
      dayOne = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 1);
      dayTwo = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 2);
      dayThree = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 3);
      dayFour = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 4);
      dayFive = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 5);
      daySix = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
      daySeven = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 7);

      var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;
      $('#weekRange').text($.datepicker.formatDate('M d', dayOne, inst.settings) + " to " + $.datepicker.formatDate('M d, yy', daySeven, inst.settings));
      $('#mondayNum').text($.datepicker.formatDate('d', dayOne));
      $('#tuesdayNum').text($.datepicker.formatDate('d', dayTwo));
      $('#wednesdayNum').text($.datepicker.formatDate('d', dayThree));
      $('#thursdayNum').text($.datepicker.formatDate('d', dayFour));
      $('#fridayNum').text($.datepicker.formatDate('d', dayFive));
      $('#saturdayNum').text($.datepicker.formatDate('d', daySix));
      $('#sundayNum').text($.datepicker.formatDate('d', daySeven));
      $("#datePick").datepicker("setDate", dayOne);
    }
  });

  $("#datePick").datepicker("setDate", new Date());
  var date = $("#datePick").datepicker('getDate');
  dayOne = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 1);
  dayTwo = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 2);
  dayThree = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 3);
  dayFour = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 4);
  dayFive = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 5);
  daySix = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
  daySeven = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 7);
  $('#weekRange').text($.datepicker.formatDate('M d', dayOne) + " to " + $.datepicker.formatDate('M d, yy', daySeven));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<input style="display: none" name="date" type="input" id="datePick" />
<span>Week Of: </span>
<span style="font-weight: bold" id="weekRange">
			
		</span>
<br/>M : <span id="mondayNum"></span>
<br/>TU : <span id="tuesdayNum"></span>
<br/>W : <span id="wednesdayNum"></span>
<br/>TH : <span id="thursdayNum"></span>
<br/>F : <span id="fridayNum"></span>
<br/>SA : <span id="saturdayNum"></span>
<br/>SU : <span id="sundayNum"></span>

关于javascript - jQuery datePicker 周选择，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38403287/

文章推荐： javascript - jQuery - 日期选择器未填充 HashMap 日期字段

文章推荐： javascript - 如何使物体沿对 Angular 线和之字形移动？

文章推荐： javascript - 如何迭代通过 AJAX JSON 发送的对象

javascript - moment.js 认为 2013-12-31 是第 1 周，而不是第 53 周
moment.js 库很棒，我几乎一直都在使用它，但我最近遇到了一些有趣的事情。我正在尝试按一年中的一周绘制数据，其中一个数据点是 2013 年 12 月 31 日，moment.js 告诉我这是第
sql - 如何找到一年中最大的 ISO 周
有没有办法可以找到给定一年的最后一周的数字。例如，对于年份 2018 , 2018 的最后一周数是 52。年份 2015 , 上周数字是 53。最佳答案如果您指的是 ISO 周，那么您可以使用
javascript - 检查日期是否已超过 2 周
我正在尝试创建一个 if 语句，该语句根据当前日期检查日期，如果日期少于 2 周，则抛出错误。我当前的代码 const moment = require('moment') const today
scala - 在spark Scala的新行中添加两个日期之间的所有日期(周)
转换 Spark 数据帧 +----+---------+------+ |name|date |amount| +----+---------+------+ |Jhon|4/6/2018
java - 如何在从日期选择器获取的当前日期上添加 40 周
我有这段代码，我想在从日期选择器获取的日期中添加 40 周，并在将 40 周(280 天)添加到从日期选择器获取的日期后获取新日期。代码: public class MainActivity ext
RethinkDB:我可以按天/周/月分组吗？
我的 table 上有一个 timestamp字段，这是一个标准的 RethinkDB 日期字段。我可以使用此时间戳字段按天/周/月对行进行分组吗？在 group() 文档中找不到任何示例。最佳答
javascript - 回调月、周、日标题栏按钮点击？
当用户单击日/周/月按钮时，我需要运行一些 Javascript 代码来重新加载日历。是否有类似 dayButtonClicked() 之类的回调？发生BUG: 当我第一次加载日历时。最初的 Vie
c# - 需要根据年-周-日计算日期
当我收到年份、周数和星期几时，如何在 C# 中计算日期。例如:年份 = 2011周 = 27天 = 6 结果应该是 2011-7-10 感谢大家。我根据维基百科算法解决了它。最佳答案此处没有 C#
c# - 如何按日、周、月自动发送邮件？
如何使用 c#.net 每天、每周和每月发送电子邮件？我正在考虑创建一个 Windows 服务应用程序，但我不知道该怎么做，也不知道该怎么做。非常感谢您的想法。最佳答案 Windows 服务可能
javascript - 周 View 标题的完整日历格式
最近我在处理全日历。我想更改周 View 中日期的格式。我发现很多人使用 columnFormat: { month: 'ddd', week: 'ddd d/M', day: 'dddd d/M'
javascript - 刷新全日历时显示同一月/周/日
我正在使用一个完整的日历插件来显示各种事件。我的问题是，当我更改正在查看的月份/周，然后刷新时，我会回到当前的月份/周，而我想留在之前查看的同一个月/周。即如果现在是八月，我回到七月，然后刷新，我希
MySQL 交叉表查询动态显示当前周以及过去 12 周
我有一个按周计算所有工单的查询，但我需要将其转换为动态两行报告，将周开始日期移动到列中？这就是我试图让它做的事情.. 这是我的查询: SELECT td_type, FROM_DAYS(TO_DAY
php - Mysql计数并拆分为日、周、年以在同一查询中进行统计
我想获取某件事的统计数据。我正在尝试统计今天、本周、本月的情况。我的查询: "SELECT COUNT(id) FROM images i WHERE i.user_id = 3 GROUP BY
php - 使用日/周/月过滤热门商品
我正在开发一个有 200.000 个页面的网站。还有一个浏览部分，显示最受欢迎、评价最高等文档。然而，在发布几周后，此部分将变得几乎静态。所以我还想实现一个过滤系统，它将显示今天、本周、本月最受欢迎的
mysql 其中日期早于现在 + 2 周
如何从字段日期早于现在 + 2 周的 MySQL 数据库中获取行？我试过了 WHERE date_ready < DATE_SUB(CURDATE(), INTERVAL 2 WEEK) 但这不是我
MySQL:如何从某个日期算起 1 周
我有下表: create table my_table ( SubjectID int, Date Date, Test_Value int ); insert into my_table(Su
ios - 使用按钮将日期增加 2 周
好吧，这几天我一直在努力解决这个问题。我是一个 super 初学者，我有一个标签。在该标签中，我显示了日期 1/20/21。我能够做到这一点。然后我有一个按钮。我希望每次单击该按钮都会将日期增加 14
python - 根据日期、周、月获取平均数据
我有一个数据集，其中包含工厂 worker 三年产出的数据。现在我想获得基于日期、周、月的平均输出。问题是日期格式类似于 %d.%m.%Y(日-月-年)。我的问题是如何在保持日期格式不变的同时获得预期
c# - 在当前日期基础上增加 1 周
我有这样的东西 DateTime.Now.ToString("dd.MM.yy"); 在我的代码中，我需要添加 1 周，比如 5.4.2012 变成12.4.2012 我试过转成int再累加，但是到3
MySQL 移动平均线 - 4 周
我已经阅读了几篇关于在 mysql 查询中估计移动平均值的文章，但是我的情况似乎稍微困难一些，因为该表不包含我想要计算平均值的列。我需要计算每组的行数，并显示该组的移动平均值。表中基本上只有一列相关

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - jQuery datePicker 周选择