如何在angularjs中获取每周明智的开始和结束日期

Posted 2023-05-09

【中文标题】如何在angularjs中获取每周明智的开始和结束日期

【英文标题】：How to get the Week wise Start and End date in angularjs

【发布时间】：2018-01-14 09:38:07

【问题描述】：

在我使用 npm 中的 angularjs-DatePicker 之前。

在这里，我可以从日期选择器中选择日期。但现在我必须将字段设置为 FromDate 和 ToDate 表示星期 StartDate 和 EndDate 应显示该周中的任何日期选择时间。

ex：在Calender 01-08-2017开始，因此，只要选择01到05的任何日期，那么两个字段应显示为01和Todate为06，并且只要用户选择31即可-07-2017 两个字段应显示为 7 月 30 日和 31 日。

我有一个想法在 DotNet 中从 FromDate Calender 控件 onchange 事件中实现 ToDate，如下面提到的代码

Convert.ToDouble(objstart.DayOfWeek)).ToString("dd-MM-yyyy")

但是如何在 angularjs 中实现这个用例。

谢谢

【问题讨论】：

如果你必须在javascript中做大量的日期操作，我推荐使用moment.js

从您的示例来看：您想要选择所选日期适合的星期。但星期的开始和结束应该始终在同一个月，并且星期从星期日开始。对吗？

@Salketer 是的。但不是强制性的星期日作为默认的开始日期，即使我们保持星期一也没有问题。

【参考方案1】：

好的，所以我要做的是计算不同的日期，并根据一周的开始或结束来取最小值/最大值。

这里：

//Use the date received, UTC to prevent timezone making dates shift 
var pickedDate = new Date("08-03-2017UTC");
 
var startSunday = new Date(pickedDate);
startSunday.setDate(pickedDate.getDate() - pickedDate.getDay());
var startMonth = new Date(pickedDate);
startMonth.setDate(1);
var startDate = Math.max(startMonth,startSunday);

console.log("Start:" , new Date(startDate));

var endSaturday = new Date(pickedDate);
endSaturday.setDate(pickedDate.getDate() + (7-pickedDate.getDay()));
var endMonth = new Date(pickedDate);
endMonth.setMonth(pickedDate.getMonth()+1);//Add a month
endMonth.setDate(0);// to select last day of previous month.
var endDate = Math.min(endMonth,endSaturday);

console.log("End" , new Date(endDate));

诀窍是使用日期，找到所有可能的开始和结束日期，然后使用 Math.min 和 Math.max 选择正确的日期，这将使用它们的时间戳比较日期。

【讨论】：

感谢您的快速回答。让我试试这个。

【参考方案2】：

JavaScript 中有非常好的库来处理日期操作。

https://github.com/datejs/Datejs

有一种方法

Date.parse('next friday')       // Returns the date of the next Friday.
Date.parse('last monday') 

使用这些方法，您可以根据当前周获取一周的开始和结束日期。

我希望它会有所帮助。

【讨论】：

这在某种程度上是可以接受的，但是当一个月的周末在星期二结束时，然后从这个函数中你编写的它将显示下个月的日期为星期五的 endDate。在这种情况下，它应该将开始日期显示为 sun 并将结束日期显示为 tue 本身

如果可能，请尝试在小提琴中显示，以便我可以轻松地将我的场景与您联系起来，感谢您的回答。

嗨 Charan，我可能无法清楚地理解这个问题。你到底需要什么。也许你可以写一些输入和预期出来，以便我能理解。

【参考方案3】：

您可以使用库moment 轻松实现此目的。这个库中有很多有用的函数。

var selectedDate = moment('Mon Aug 10 2017');

//If you want to get the ISO week format(Monday to Sunday)
var weekStart = selectedDate.clone().startOf('isoweek').format('MMM Do');
var weekEnd = selectedDate.clone().endOf('isoweek').format('MMM Do');

//If you want to get the Sunday to Saturday week format
var weekStart = selectedDate.clone().startOf('week').format('MMM Do');
var weekEnd = selectedDate.clone().endOf('week').format('MMM Do');

【讨论】：

这很好，但我的情况不是关于周格式。当用户在 DatePicker 中选择任何日期时，它应该显示该周 startdate 和 endDate

weekStart 的值为“Aug 7th”，weekEnd 的值为“Aug 13th”。希望这是你想要的，对吧？

【参考方案4】：

这里不需要 angular 指令，你可以使用下面的 JavaScript 扩展。

//get week from date
Date.prototype.getWeekNumber = function (weekstart) 


    var target = new Date(this.valueOf());

    // Set default for weekstart and clamp to useful range        
    if (weekstart === undefined) weekstart = 1;
    weekstart %= 7;

    // Replaced offset of (6) with (7 - weekstart)
    var dayNr = (this.getDay() + 7 - weekstart) % 7;
    target.setDate(target.getDate() - dayNr + 0);//0 means friday

    var firstDay = target.valueOf();

    target.setMonth(0, 1);
    if (target.getDay() !== 4) 
        target.setMonth(0, 1 + ((4 - target.getDay()) + 7) % 7);
    
    return 1 + Math.ceil((firstDay - target) / 604800000);;
;

//get date rance of week
Date.prototype.getDateRangeOfWeek = function (weekNo, weekstart) 

    var d1 = this;
    var firstDayOfWeek = eval(d1.getDay() - weekstart);
    d1.setDate(d1.getDate() - firstDayOfWeek);

    var weekNoToday = d1.getWeekNumber(weekstart);
    var weeksInTheFuture = eval(weekNo - weekNoToday);

    var date1 = angular.copy(d1);
    date1.setDate(date1.getDate() + eval(7 * weeksInTheFuture));
    if (d1.getFullYear() === date1.getFullYear()) 
        d1.setDate(d1.getDate() + eval(7 * weeksInTheFuture));
    

    var rangeIsFrom = eval(d1.getMonth() + 1) + "/" + d1.getDate() + "/" + d1.getFullYear();

    d1.setDate(d1.getDate() + 6);
    var rangeIsTo = eval(d1.getMonth() + 1) + "/" + d1.getDate() + "/" + d1.getFullYear();

    return  startDate: rangeIsFrom, endDate: rangeIsTo 
;

你的代码可以是这样的

 var startdate = '01-08-2017'
                var weekList = [];
                var year = startdate.getFullYear();
                var onejan = new Date(year, 0, 1);//first january is the first week of the year
                var weekstart = onejan.getDay();
                weekNumber = startdate.getWeekNumber(weekstart);

                //generate week number
                    var wkNumber = weekNumber;
                    var weekDateRange = onejan.getDateRangeOfWeek(wkNumber, weekstart);
                    var wk = 
                        value: wkNumber
                        , text: 'Week' + wkNumber.toString()
                        , weekStartDate: new Date(weekDateRange.startDate)
                        , weekEndDate: new Date(weekDateRange.endDate)
                    ;
                    weekList.push(wk);

【参考方案5】：

我想这没有指令或过滤器，您需要自己创建一个。你可以从date-time-object引用日期对象