Date Range Picker

Date Range Picker

Asset Version: 1.0.0
  • Version 1.0.0
Last Published: Jul 6, 2017 By: Kony Team
162 1 0 35
The component provides an interactive calendar interface for quickly selecting a pair of dates. It basically consists of two date input fields which on click expands into a calendar overlay. Customize the component as per your requirement by renaming labels and restricting the selectable dates.

Requirements

  • Visualizer Enterprise
 

Devices

 

Platforms

Features

  • Ready-to-use date picker component for mobile apps
  • Calendar Interface for user to quickly input a pair of dates
  • Configure as per your requirement- specify label names and calendar range

Prerequisites

  • Kony Visualizer v8

Date Range Picker component is a customized calendar widget, which enables the user to quickly select Start date and End date from an interactive calendar.

Usecase

It can be used in flight booking, hotel booking or any other app which intends to take two dates (From and To) as input from the user.

Your app with the Date Range Picker component allows your users to select the start date and the end date, to highlight the specified range.

The Data Range Picker component is a ready-to-use component. You can import the Date Range Picker component into your app (created in Kony Visualizer), and can achieve the features (to select start date and end date) without developing it from scratch. The Date Range Picker component also facilitates a set of properties, events, and APIs that helps you customize the UI elements and functionality, if required.

The following sections help you use the Date Range Picker component in your app.

Prerequisites

Before you start using the Date Range Picker component, ensure the following:

  1. Kony account.
  2. Kony Visualizer 8.0
  3. To prevent UI distortions:
    1. The width of the Date Range Picker component must be 100% of the device width.
    2. The height of the Date Range Picker component must be 9.44% of the device height.

Importing the Date Range Picker Component

Before you start importing the component to Kony Visualizer, you must download the component from Kony Marketplace website. You can import the marketplace components only into the apps that are of the Kony Reference Architecture type.

  1. Open your app project in Kony Visualizer.
  2. On the File menu, point to Import, and click Component. The Open dialog appears.
  3. Navigate to the location where you downloaded the component (zip file) on your computer, select the component, and click Open. The Import Marketplace Item dialog appears.
    datepicker_import.png
  4. In the Library Name box, type a name if you want to create a new library. Otherwise, you can select the existing library name.
  5. In the Collection Name box, type a name if you want to create a new collection. Otherwise, you can select the existing collection name.
  6. In the Component Name box, the com.konymp.daterangepicker name is displayed by default. If you want, you can rename it.

When you import a component, the component will be imported to Visualizer's workspace, but not directly into your app. So, after importing a component, you must add the component to your app.

Adding a Date Range Picker Component into your App

You can add a Date Range Picker component to FlexForm, FlexContainer, and FlexScrollContainer widgets.

To add a Date Range Picker component:

  1. Open your app, and then open the form to which you want to add the component.
  2. On the My Libraries tab, select the defined Marketplace library from the drop-down list in which the component exists.
    library.png
  3. From the Collections tab, drag the component onto the form on the Visualizer canvas. The component will be added to the form. You will also see a new element, com.konymp.daterangepicker, under the component section on the Templates tab.

After adding a component to a form, you can configure the component the way you want it using the Look, Skin, and Action tabs on the Properties pane. Configuring the properties on the Properties pane is similar to configuring the properties of any widget in Kony Visualizer. For more information, refer to Button Widget.

You will also see a new tab component, on the Properties pane. The component tab contains assorted properties relevant to the component that allow you to customize the component as required. The properties on the component tab are categorized as Pass Through and Custom properties. The Pass Through properties are the default properties of individual widgets in the component. The Custom Properties are user-defined properties based on the use case of the component.

Note:

Changes made to the Custom properties are reflected only at the run time, but not at the design time (Visualizer Canvas).

You can also add a Date Range Picker component dynamically. To do so,

  1. In the Project Explorer, on the Projects tab, click the context menu arrow of Modules, and then click New JS module. A new JavaScript file opens in the Code Editor.
  2. Copy and paste the following code snippet in the file.
    /* creating a component's Object */
    var component = new com.konymp.daterangepicker({
                    "id":"daterangepicker",
                    "top":"0%",
                    "width": "100%",
                    "height": "9.44%",
                    "left": "0%",
                    }, {}, {});
     component.isTodayEnabled=true;
     component.fromDateLabel="Check In Date";
     component.toDateLabel="Check Out Date";
     component.separatorImageSrc="arrow.png";
    
    /* Calling APIs from code*/
               var selectedFromDate = this.view.component.getSelectedFromDate ();
               var selectedToDate = this.view.component.getSelectedToDate ();
                

    In the code snippet, you can edit the properties of the component as per your requirement. For more information, see Setting Properties.

  3. Save the file.

Setting Properties

The properties provided on the component tab allow you to customize the UI elements in the Date Range Picker component. You can set the properties directly on the component tab or by writing a JavaScript.

General

Enable Today Button Property
Description: Specifies whether Today is enabled or not.
Syntax: isTodayEnabled
Type: Boolean
Read/Write:

Read + Write

Example: component.isTodayEnabled=true

.

From And To Date Separator Image Property
Description: Specifies the image to be displayed as the separator between from and to calendar dates.
Syntax: separatorImageSrc
Type: String
Read/Write:

Read + Write

Example: component.separatorImageSrc="arrow.png";

From Date

Label Property
Description: Specifies the text to be displayed for the user to enter the start date.
Syntax: fromDateLabel
Type: String
Read/Write:

Read + Write

Example: component.fromDateLabel="Check In Date";
Place Holder Text Property
Description: Specifies the text to be displayed in place of Start date value when no date is selected.
Syntax: fromDateText
Type: String
Read/Write:

Read + Write

Calendar Start Month Property
Description:

Specifies the start month of the calendar.

Syntax: calendarStartMonth
Type: String
Read/Write:

Read + Write

To Date

Label Property
Description: Specifies the text to be displayed for the user to enter the end date.
Syntax: toDateLabel
Type: String
Read/Write:

Read + Write

Example: component.toDateLabel="Check Out Date";
To Date Text Property
Description: Specifies the text to be displayed in place of end date value when no date is selected.
Syntax: toDateText
Type: String
Read/Write:

Read + Write

Calendar Range

Start Date Property
Description: Specifies the start year of the calendar.
Syntax: calendarStartDate
Type: String
Read/Write:

Read + Write

Remarks:

'calendarStartDate' property throws an exception if

  • An invalid date pattern is entered.
  • The calendar start date is greater than calendar end date.
  • Any of the disabled dates are not present in the calendar range.

These exceptions are expected to be handled by the user.

End Date Property
Description: Specifies the end month of the calendar.
Syntax: calendarEndDate
Type: String
Read/Write:

Read + Write

Remarks:

'calendarEndDate' property throws an exception if

  • An invalid date pattern is entered.
  • The calendar end date is less than calendar start date.
  • Any of the disabled dates are not present in the calendar range.

These exceptions are expected to be handled by the user.

Setting Events

You can define events to be executed when an action is performed. You can configure the events directly on the Actions tab or by writing a JavaScript. To configure the events on the Actions tab, click the Edit button against each event. For more information, refer to Add Actions.

This section provides details about the event that helps you define the actions, by writing a JavaScript.

onDateSelectionDone Event
Description: The event is invoked when user selects a date from the calendar.
Syntax:

onDateSelectionDone()

APIs

The following are the APIs pertaining to the Date Range Picker component.

getSelectedFromDate API

The API fetches the From date selected by the user.

Syntax
getSelectedFromDate()
Parameters

None

Return Value

Returns a JSON object that contains the following keys.

  • date - Value of the selected From date
  • month - Name of the Month for the selected From date
  • year - Year of the selected From date
  • dateString - Date in the format of 'mm/dd/yyyy'
Example
{
	"day": "29",
	"month": "February",
	"year": "2000",
	"dateString": "2/29/2000"
}
getSelectedToDate API

The API fetches the To date selected by the user.

Syntax
getSelectedToDate()
Parameters

None

Return Value

Returns a JSON object that contains the following keys.

  • date - Value of the selected To date
  • month - Name of the Month for the selected To date
  • year - Year of the selected To date
  • dateString - Date in the format of 'mm/dd/yyyy'
Example
{
	"day": "29",
	"month": "March",
	"year": "2000",
	"dateString": "3/29/2000"
}
setDefaultFromDate

This method is used to set the default to date for the calendar. The default to date must be given as parameter of type string in MM/DD/YYYY format.

Syntax
setDefaultFromDate(defaultFromDateString)
Parameters

None

Return Value

None

Example
this.view.componentName.setDefaultFromDate("1/15/2017");
					

The above example sets January 15th of 2017 as default From date in the calendar.

setDefaultToDate

This method is used to set the default to date for the calendar. The default to date must be given as parameter of type string in MM/DD/YYYY format.

Syntax
setDefaultToDate(defaultToDateString)
Parameters

None

Return Value

None

Example
this.view.componentName.setDefaultToDate("12/15/2016");
					

The above example sets December 15th of 2016 as default To date in the calendar.

disableDate

This method is used to disable a particular date in the calendar. The date selected for disabling needs to be a parameter of type string in MM/DD/YYYY format.

Syntax
disableDate(disableDateString)
Parameters

None

Return Value

None.

Example
this.view.componentName.disableDate("8/15/2017");
disableDays

This method is used to disable a particular weekday in the calendar. The input is provided in capitalization typographic convention, parameter of type string and with the starting 3 letters of a weekday.

Syntax
disableDays(dayToDisable)
Parameters

None

Return Value

None.

Example
this.view.componentName.disableDays("SUN");
						

The above example disables all the Sundays present in the calendar