Single Date Picker

Single Date Picker

Asset Version: 1.0.0
  • Version 1.0.0
Last Published: Apr 25, 2017 By: Kony Team
134 1 0 33
The component provides an interactive calendar interface for quickly selecting a date. It is basically a date input field which expands into a calendar overlay when user clicks on it. Customize the component as per your requirement by renaming the 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 date
  • Configure as per your requirement- specify label names and calendar range

Platforms Supported

  • Android Phone Native
  • iPhone Native

Prerequisites

  • Kony Account
  • Kony Visualizer Enterprise 7.3
  • A Kony Reference Architecture app created in Kony Visualizer

Single Date Picker component is a customized Calendar Widget that allows users to quickly select a date from the Calendar.

Here is a use case that describes use of the Single Date Picker component:

Use Case

Consider that you are developing an app, which is used to book movie tickets. In the app,
you can add the Single Date Picker component that allows users to select the required date and the app displays a list of movies that are premiered on the selected date.

The Single Date Picker component is a ready-to-use component. You can import the Single Date Picker component into your app (created in Kony Visualizer), and achieve the features of Single Date Picker. The Single Date Picker component also facilitates a set of properties, events and APIs that helps you customize the fields and the functionality.

The following sections help you to use the Single Date Picker in your app.

Prerequisites

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

  1. Kony account
  2. Kony Visualizer 7.3
  3. A Kony Reference Architecture app in Kony Visualizer. You can create a Kony Reference Architecture app in Kony Visualizer using the following procedure:
    1. On the File Menu, click New Project. The New Project dialog appears.
    2. In the Project Name box, type a name for your project.
    3. Select Kony Reference Architecture, and click Create.
  4. To prevent UI distortions, ensure the following:
    1. The width of the Single Date Picker component must be 40% of the device width.
    2. The height of the Single Date Picker component must be 9.44% of the device height.

Importing the Single Date Picker Component

Before you start importing the component to Kony Visualizer, you must download the component from the 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.
    singledatepicker_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.singledatepicker name is displayed by default. If you want, you can rename it.

When you import a component, the component is imported to Visualizer's workspace, but not directly into your app. Thus, after you import a component, you must add the component to your app.

Adding a Single Date Picker Component into your App

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

To add a Single Date Picker component:

  1. Open your app, and then open the form to which you want to add the component.
  2. From the Collections tab, drag the component onto the form on the Visualizer canvas. The component will be added to the form.
    Once you drag the component to a form, you will see the component added to the form. You will also see a new element, com.konymp.singledatepicker under the Components 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, is added 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 Single Date Picker 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 JavaScript file:
          /* creating a component's Object */
    var component = new com.konymp.singledatepicker({
    	"id":"datepicker",
      	"top":"0%",
      	"width":"40%",
      	"height":"9.44%",
      	"left":"0%"
    	},{},{});
          component.isTodayEnabled=true;
          component.calenderDateText="Select Date";
    /* Calling APIs from code */
          var selectedDate = this.view.component.getSelectedDate (); 

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

  3. Save the file.

Setting Properties

The properties provided on the Component tab allow you to customize the UI elements and set constraints for the fields in the Single Date Picker component. You can set the properties directly on the Component tab or by writing a JavaScript. This section provides information on how to set the properties by writing a JavaScript.

Calendar Start Month
Category: Custom
Description: Specifies the name of the starting month.
Syntax: calendarStartMonth
Type: String
Read/Write: Read + Write
Remarks The default value of the property is January
Example:
this.view.Component_Name.calendarStartMonth = "January";
Calendar Start Year
Category: Custom
Description: Specifies the starting year of the calendar
Syntax: calendarStartYear
Type: String
Read/Write: Read + Write
Remarks: The value of the starting year must be in a range of 1900 to 2099.
The default value of the property is 2000.
Example:
this.view.Component_Name.calendarStartYear = "2000";
Calendar End Month
Category: Custom
Description: Specifies the name of the ending month.
Syntax: calendarEndMonth
Type: String
Read/Write: Read + Write
Remarks The default value of the property is January
Example:
this.view.Component_Name.calendarEndMonth = "January";
Calendar End Year
Category: Custom
Description: Specifies the ending year of the calendar
Syntax: calendarEndYear
Type: String
Read/Write: Read + Write
Remarks: The value of the ending year must be in a range of 1900 to 2099.
The default value of the property is 2030.
Example:
this.view.Component_Name.calendarEndYear = "2030";
Date Label
Category: Pass Through
Description: Specifies the text that prompts a user to select a date from the calendar. Ex: Departure date.
Syntax: dateLabel
Type: String
Read/Write: Read + Write
Remarks The default value of the property is Date.
Example:
this.view.Component_Name.dateLabel = "Date";
Enable Today Button
Category: Pass Through
Description: Controls whether or not to display the Today button.
Syntax: isTodayEnabled
Type: Boolean
Read/Write: Read + Write
Remarks The default value of the property is true.
Example:
this.view.Component_Name.isTodayEnabled = true;
Select Date Text
Category: Custom
Description: Specifies the text to be displayed when no date is selected.
Syntax: selectDateText
Type: String
Read/Write: Read + Write
Remarks

The default value of the property is Select Date.

Example:
this.view.Component_Name.selectDateText = "Select Date";

Defining 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 Action tab, click Edit against each event. For more information, refer to Add Actions.

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

APIs

The following API pertains to the Single Date Picker component:

getSelectedDate

The API returns the date selected by a user.

Syntax
getSelectedDate()
Parameters
None
Return Value
JSON:

Returns a JSON object which contains the following keys.
  • date – Selected date
  • month- Name of the selected month
  • year- Selected year
  • dateString- Selected date in mm/dd/yyyy format
Example
var selectedDate= this.view.component.getSelectedDate();
Sample of a returned JSON
{
“day”: ”29”,
“month”: ”February”,
”year”: “2000”,
“dateString”: ”2/29/2000”
}