Bootstrap DateTimeRangePicker Add-on
DateTimeRangeField is a UI component add-on for Vaadin 7 which wraps the bootstrap daterangepicker (https://github.com/dangrossman/bootstrap-daterangepicker)
Please checkout the functionality in https://github.com/dangrossman/bootstrap-daterangepicker.
Sample code
private static final String DATE_PATTERN = "MM/dd/YYYY"; private static final Format DATE_FORMATTER = new SimpleDateFormat(DemoUI.DATE_PATTERN); private static final String DEFAULT_LANGUAGE = "en"; // Initialize our new UI component boolean linkedCalendars = true; boolean autoUpdateInput = true; this.dateRangeField = new DateTimeRangeField(DemoUI.DATE_FORMATTER, linkedCalendars, autoUpdateInput).language(DemoUI.DEFAULT_LANGUAGE); final BeanFieldGroup<DateTimeRangeBean> fieldGroup = new BeanFieldGroup<>(DateTimeRangeBean.class); fieldGroup.setBuffered(false); DateTimeRangeBean bean = new DateTimeRangeBean(new DateTimeRange(this.startDate, this.endDate)); fieldGroup.setItemDataSource(bean); fieldGroup.bind(this.dateRangeField, "dateTimeRange"); ValueChangeListener valueChangeListener = new ValueChangeListener() { @Override public void valueChange(ValueChangeEvent event) { fieldGroup.unbind(DemoUI.this.dateRangeField); DateTimeRangeField.DateLimit dateLimit = null; if (DemoUI.this.checkDateLimit.getValue()) { dateLimit = DemoUI.this.buildDateLimit(DemoUI.DATE_LIMIT_SPAN_MOMENT, DemoUI.DATE_LIMIT_SPAN_VALUE); } // Ranges Map<String, DateTimeRangeField.Range> ranges = new HashMap<>(); if (DemoUI.this.checkRanges.getValue()) { DateTimeRangeField.Range rangeToday = DemoUI.this.buildRange(DemoUI.this.today, DemoUI.this.today); ranges.put(DemoUI.RANGE_LIMIT_TODAY, rangeToday); DateTimeRangeField.Range rangeYesterday = DemoUI.this.buildRange(DemoUI.this.yesterday, DemoUI.this.yesterday); ranges.put(DemoUI.RANGE_LIMIT_YESTERDAY, rangeYesterday); } // Others DemoUI.this.dateRangeField.parentEl(DemoUI.this.textParentEl.getValue()) .minDate(DemoUI.this.minDateField.getValue()) .maxDate(DemoUI.this.maxDateField.getValue()) .applyLabel(DemoUI.this.textApplyLabel.getValue()) .cancelLabel(DemoUI.this.textCancelLabel.getValue()) .opens(DateTimeRangeEnums.OPENS.valueOf(DemoUI.this.comboOpens.getValue().toString().toUpperCase())) .language(DemoUI.DEFAULT_LANGUAGE) .drops(DateTimeRangeEnums.DROPS.valueOf(DemoUI.this.comboDrops.getValue().toString().toUpperCase())) .showDropdowns(DemoUI.this.checkShowDropDowns.getValue()) .showWeekNumbers(DemoUI.this.checkShowWeekNumbers.getValue()) .showISOWeekNumbers(DemoUI.this.checkShowISOWeekNumbers.getValue()) .singleDatePicker(DemoUI.this.checkSingleDatePicker.getValue()) .timePicker(DemoUI.this.checkTimePicker.getValue()) .timePicker24Hour(DemoUI.this.checkTimePicker24Hour.getValue()) .timePickerIncrement(Integer.valueOf(DemoUI.this.textTimePickerIncrement.getValue())) .timePickerSeconds(DemoUI.this.checkTimePickerSeconds.getValue()) .dateLimit(dateLimit) .autoApply(DemoUI.this.checkAutoApply.getValue()) .linkedCalendars(DemoUI.this.checkLinkedCalendars.getValue()) .autoUpdateInput(DemoUI.this.checkAutoUpdateInput.getValue()) .buttonClasses(DemoUI.this.textButtonClasses.getValue()) .applyClass(DemoUI.this.textApplyClass.getValue()) .cancelClass(DemoUI.this.textCancelClass.getValue()) .ranges(ranges) .alwaysShowCalendars(DemoUI.this.checkAlwaysShowCalendars.getValue()) .showCustomRangeLabel(DemoUI.this.checkShowCustomRangeLabel.getValue()); bean.setDateTimeRange(new DateTimeRange(DemoUI.this.startDateField.getValue(), DemoUI.this.endDateField.getValue())); fieldGroup.bind(DemoUI.this.dateRangeField, "dateTimeRange"); } }; // ParentEl this.textParentEl = new TextField("parentEl"); this.textParentEl.addValueChangeListener(valueChangeListener); // Other ui components ...
Links
Compatibility
Was this helpful? Need more help?
Leave a comment or a question below. You can also join
the chat on Discord or
ask questions on StackOverflow.
Version
- Released
- 2018-03-20
- Maturity
- STABLE
- License
- Apache License 2.0
Compatibility
- Framework
- Vaadin 8.2+ in 2.0
- Vaadin 7.6+ in 1.5
- Browser
- Firefox
- Safari
- Google Chrome
- Internet Explorer
- Internet Explorer