About DateRangePicker and PopupDateRangePicker

The DateRangePicker component is used for entering or selecting one or two dates and times (start date and end date). The PopupDateRangePicker component is similar to the DateRangePicker component, but it works in a popup form.

Usage examples

A booking service for travelers might want to display two calendars at the same time for the user to select the check-in and check-out dates without having to manipulate the calendars.

Using DateRangePicker / PopupDateRangePicker

To use the DateRangePicker and PopupDateRangePicker components, they need to be added to TypeDefinition.

Allowing Users to Select Only Specific Dates

You can specify the date range within which the user can select a date.

Example

Select the mindate and maxdate property values in the table on the right, and the dates outside the specified range will not be available for selection.

sample_daterangepicker_01.xfdl

Core features used in the example

mindate

It will not be possible to select dates before the specified date.

maxdate

It will not be possible to select dates later than the specified date.

How to implement an example

this.Grid00_oncellposchanged = function(obj:nexacro.Grid,e:nexacro.GridSelectEventInfo)
{
    this.DateRangePicker00.mindate = this.Dataset00.getColumn(e.row, "mindate");
	this.DateRangePicker00.maxdate = this.Dataset00.getColumn(e.row, "maxdate");
};

Using the PopupDateRangePicker Component in the DateField Component

The DateRangePicker control can be used to select a date and time in a DateField component, there are constraints in setting the detailed properties in this case. By using the PopupDateRangePicker component instead, you can use all of the properties of the PopupDateRangePicker component and configure it to your liking.

Example

In the second DateField component, run the PopupDateRangePicker component instead of the DateRangePicker control.

sample_daterangepicker_02.xfdl

Core features used in the example

type

In the PopupDateRangePicker component, set whether to select only one date. This will affect the operations of the popup window closing once a date is selected.

displaymonthcount

Select the number of months to be displayed on the page. You can choose any number from 1 to 3.

defaultrangeposition

If you set the displaymonthcount property value to 3, you must choose where the monthly calendar with the start date or current date should appear. If it set to 2, it will be displayed in the middle.

How to implement an example

defaultrangeposition: 2

displaymonthcount: 3

type: "single"

useheadline: false

useclosebutton: false

Set the PopupDateRangePicker component to run instead of the DateRangePicker control.

this.DateField01_ondropdown = function(obj:nexacro.DateField,e:nexacro.EventInfo)
{
	this.PopupDateRangePicker00.trackPopupByComponent( "start", obj, 0,33);
	e.preventDefault();
};

If the useclosebutton property value is true, you must select a date and click the [CLOSE] button to close the popup window.

this.PopupDateRangePicker00_ondayclick = function(obj:nexacro.PopupDateRangePicker,e:nexacro.DateRangePickerDayClickEventInfo)
{
	this.DateField01.value = e.date;
};