Directory

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)

View larger

Close

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

• Issue Tracker
• Source Code

Compatibility