反应日期选择多个星期范围

时间:2019-05-19 20:29:28

标签: reactjs date datepicker react-dates

我目前正在使用react-dates来拥有一个DateRangePicker,我希望用户能够一次选择多个星期。我见过this way一次选择7天,这是我想要的开始。

我希望先单击以选择所选星期的开始,然后可以突出显示并选择另一个星期。当用户点击第二周时,我想将结束日期设置为所选第二周的结束日期。

我不仅限于react-dates,如果可以/更容易地使用另一个软件包,我可以使用它!

我希望我已经足够清楚,不要犹豫,要求澄清。

谢谢。

1 个答案:

答案 0 :(得分:0)

使用import java.util.ArrayList; import java.util.List; import java.util.stream.Collectors; public class StreamTest { public static void main(String[] args) { List<SchoolObj> listOne = new ArrayList<SchoolObj>(); // TODO: Add sample data to listOne. listOne.add(new SchoolObj("nameA", "schoolX")); listOne.add(new SchoolObj("nameC", "schoolZ")); List<SchoolObj> listTwo = new ArrayList<SchoolObj>(); // TODO: Add sample data to listTwo. listTwo.add(new SchoolObj("nameA", "schoolX")); listTwo.add(new SchoolObj("nameB", "schoolY")); // Print results from loop method. System.out.println("Results from loop method:"); List<SchoolObj> resultsViaLoop = StreamTest.createSharedListViaLoop(listOne, listTwo); for (SchoolObj obj : resultsViaLoop) { System.out.println(obj); } // Print results from stream method. System.out.println("Results from stream method:"); List<SchoolObj> resultsViaStream = StreamTest.createSharedListViaStream(listOne, listTwo); for (SchoolObj obj : resultsViaStream) { System.out.println(obj); } } public static List<SchoolObj> createSharedListViaLoop(List<SchoolObj> listOne, List<SchoolObj> listTwo) { List<SchoolObj> result = new ArrayList<SchoolObj>(); for (SchoolObj one : listOne) { for (SchoolObj two : listTwo) { if (one.getName().equals(two.getName()) && one.getSchool().equals(two.getSchool())) { result.add(one); } } } return result; } public static List<SchoolObj> createSharedListViaStream(List<SchoolObj> listOne, List<SchoolObj> listTwo) { List<SchoolObj> listOneList = listOne.stream().filter(two -> listTwo.stream() .anyMatch(one -> one.getName().equals(two.getName()) && two.getSchool().equals(one.getSchool()))) .collect(Collectors.toList()); return listOneList; } } 中的DateRangePicker组件,您需要以下道具:

react-dates

示例:https://stackblitz.com/edit/react-lyd5qh

您可以使用endDateOffset中的逻辑来指向一种方法,该方法可以计算一周中剩余的天数并相应地进行设置