2017-08-07 72 views
6

Zanim użyję angularjs-DatePicker z tego npm.Jak uzyskać rozsądną datę rozpoczęcia i zakończenia tygodnia w angularjs

Tutaj jestem w stanie wybrać datę z datą picker.But teraz muszę dziedzinach jak fromdate i todate co oznacza tygodnia StartDate i DataZakończenia powinien pokazać podczas każdej dacie odebrać w W tym tygodniu.

Np .: tak jak w kalendarzu 01-08-2017 Zacznij od wt., Więc za każdym razem, gdy wybierze dowolną datę od 01 do 05, te dwa pola powinny być wyświetlane jako FromDate jako 01 i TODate jako 06 i w tym samym, gdy użytkownik wybierze 31-07-2017 dwa pola powinny pokazywać jako 30 i 31 lipca.

Mam pomysł, aby osiągnąć todate z fromdate Kalendarza kontrolować onchange w DotNet tak jak poniżej wspomnianego kodu

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

ale jak osiągnąć ten USECASE w angularjs.

Dzięki

+0

Jeśli musisz dużo manipulować datami w javascript, polecam użyć [moment.js] (https://momentjs.com/) – devqon

+0

Sądząc po twoich przykładach: Chcesz wybrać tydzień z wybraną datą wpasowuje się. Ale tydzień rozpoczęcia i zakończenia powinien być w tym samym miesiącu, zawsze, a tygodnie zaczynają się w niedziele. Czy to prawda? – Salketer

+0

@Salketer Tak. Ale nie obowiązkowa niedziela jako data początkowa, nawet domyślnie nie mieliśmy problemu. –

Odpowiedz

2

Ok, więc co bym zrobił to obliczyć różne daty, i podjąć Min/Max w zależności od początku lub końcu tygodnia .

tutaj:

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

Sztuką było grać z datami, znajdź wszystkie początkowe i końcowe możliwe daty, a następnie wybrać odpowiedni jeden z Math.min i Math.max który porówna daty z ich znacznikiem czasu.

+0

Dzięki za szybką odpowiedź. pozwól mi spróbować. –

0

Jest bardzo dobry Biblioteka dostępna w języku JavaScript do obsługi Data manipulacje.

https://github.com/datejs/Datejs

Istnieje metoda

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

Stosując te metody można uzyskać rozpoczęcia i datę tygodnia w oparciu o bieżący tydzień kończy.

Mam nadzieję, że to pomoże.

+0

To nieco akceptowalne, ale gdy miesiąc się kończy, wtedy z tej funkcji, którą napisałeś, pokaże datę następnego miesiąca jako endDate, która jest w piątek. W takim przypadku powinna być wyświetlana data rozpoczęcia jako data słońca i zakończenia jako sama wtyczka. –

+0

Spróbuj pokazać w skrzypcach, jeśli to możliwe, aby móc łatwo odnieść mój scenariusz do Ciebie, dziękując za odpowiedź. –

+0

Cześć Charanie, może nie jestem w stanie zrozumieć tego pytania. Czego dokładnie potrzebujesz. Być może możesz napisać jakieś dane wejściowe i spodziewane, aby móc je zrozumieć. – Ashvin777

-1

Domyślam się, że nie ma w tym celu żadnej dyrektywy ani filtra, trzeba ją utworzyć samodzielnie. możesz odnieść obiekt daty od date-time-object

0

Możesz to osiągnąć po prostu za pomocą biblioteki moment. W tej bibliotece jest wiele przydatnych funkcji.

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

To jest w porządku, ale moja sprawa nie dotyczy formatu tygodnia. gdy użytkownik wybierze dowolną datę w DatePicker, powinien pokazać, że w tym tygodniu data rozpoczęcia i koniecData –

+0

weekStart będzie mieć wartość "7 sierpnia", a weekEnd "13 sierpnia". Mam nadzieję, że tego właśnie chcesz, prawda? –

0

Tutaj nie ma potrzeby stosowania dyrektywy kątowej, można użyć rozszerzenia JavaScript, które znajduje się poniżej.

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

Twój kod może wyglądać następująco

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