Directory

← Back

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)

Author

Rating

Popularity

<100

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 ...


Compatibility

(Loading compatibility data...)

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

Bootstrap DateTimeRangePicker Add-on - Vaadin Add-on Directory

DateTimeRangeField is a UI component add-on for Vaadin 7 which wraps the bootstrap daterangepicker (https://github.com/dangrossman/bootstrap-daterangepicker) Bootstrap DateTimeRangePicker Add-on - Vaadin Add-on Directory
Please checkout the functionality in https://github.com/dangrossman/bootstrap-daterangepicker.
Online