javascript - How to get the Week wise Start and End date in angularjs - Stack Overflow

admin管理员组

文章数量:1397016

Before I am using angularjs-DatePicker from this npm.

Here,I am able to select the date from the date picker.But now I have to fields as FromDate and ToDate which means the week StartDate and EndDate should show when any date pick in that week.

Ex: Like in Calender 01-08-2017 Start on Tue, So whenever Selects Any date from 01 to 05 then the two fields should show as FromDate as 01 and TODate as 06 and in the same whenever the user selects the 31-07-2017 the the Two fields should show as 30 and 31 of july.

I have an idea to achieve the ToDate from FromDate Calender control onchange event in DotNet as like below mentioned code

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

But how to achieve this usecase in the angularjs.

Thanks

Before I am using angularjs-DatePicker from this npm.

Here,I am able to select the date from the date picker.But now I have to fields as FromDate and ToDate which means the week StartDate and EndDate should show when any date pick in that week.

Ex: Like in Calender 01-08-2017 Start on Tue, So whenever Selects Any date from 01 to 05 then the two fields should show as FromDate as 01 and TODate as 06 and in the same whenever the user selects the 31-07-2017 the the Two fields should show as 30 and 31 of july.

I have an idea to achieve the ToDate from FromDate Calender control onchange event in DotNet as like below mentioned code

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

But how to achieve this usecase in the angularjs.

Thanks

• javascript
• jquery
• angularjs
• date
• datepicker

Share Improve this question Follow asked Aug 7, 2017 at 6:46 charan tejcharan tej 1,0541111 silver badges3030 bronze badges 3

• If you have to do a lot of date manipulation in javascript, I remend to use moment.js – devqon Commented Aug 7, 2017 at 6:50
• Judging from your examples: You want to select the week the chosen date fits in. But the week start and end should be in the same month, always, and the weeks start on sundays. Is that right? – Salketer Commented Aug 7, 2017 at 6:51
• @Salketer Yes. But not mandatory sunday as startdate as default even mon we kept also no issue. – charan tej Commented Aug 7, 2017 at 6:53

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

Ok, so what I'd do is to calculate different dates, and take the min/max depending on the start or end of the week.

Here:

//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));

The trick was to play with the dates, find all the possible start and end dates, then choose the right one with Math.min and Math.max which will pare the dates using their timestamp.

There is very good Library available in JavaScript to handle Date Manipulations.

https://github./datejs/Datejs

There is a method

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

Using these method you can get the start and ending date of the week based on the current week.

I hope that it will help.

You can simply achieve this using the library moment. There are a lot of useful functions in this library.

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

No need angular directive here, you could use the JavaScript extension which is below.

//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 }
};

Your code can be look like this

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

I guess there is no directive or filter for this, you need to create one for yourself. you can refer date object from date-time-object

本文标签： javascriptHow to get the Week wise Start and End date in angularjsStack Overflow