How to get the Week wise Start and End date in angularjs

Question

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

Answer 1

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 compare the dates using their timestamp.

Answer 2

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

https://github.com/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.

Answer 3

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

Answer 4

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

Answer 5

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