Single Date Picker

Single Date Picker

Asset Version: 1.0.0
  • Version 1.0.0
Last Published: Jul 6, 2017 By: Kony Team
155 1 0 32
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

Prerequisites

  • Kony Visualizer v8

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

  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. 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 sub-tab, drag the component onto the form on the Visualizer canvas. The component is added to the form. You can also see a new element, com.konymp.singledatepicker in 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 General and Calendar Range properties.

Note:

Changes made to the Calendar Range properties are reflected only during run time, but not during 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 */
          this.view.component.getSelectedDate ();
    
    /*Adding the Single Date Picker component to a Form*/ this.view.add(component);

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

General

Date Label
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.dateLabel = "Date";
Date Placeholder Text
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.selectDateText= "Select Date";
Enable Today Button
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.isTodayEnabled = true;

Calendar Range

Start Date
Description: Specifies the start date of the Calendar.
Syntax: calendarStartDate
Type: String
Read/Write: Read + Write
Remarks
  • The value must be provided in "MM/DD/YYYY" format.
  • The year must be in a range of 1900 to 2099.
Example:
this.view.component.calendarStartDate= "1/15/2000";
End Date
Description: Specifies the end date of the Calendar.
Syntax: calendarEndDate
Type: String
Read/Write: Read + Write
Remarks
  • The value must be provided in "MM/DD/YYYY" format.
  • The year must be in a range of 1900 to 2099.
Example:
this.view.component.calendarEndDate= "12/15/2030";

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
this.view.component.getSelectedDate();
Sample of a returned JSON
{
“day”: ”29”,
“month”: ”February”,
”year”: “2000”,
“dateString”: ”2/29/2000”
}
disableDays

The API disables the day selected by a user.

Syntax
disableDays()
Parameters
String
Return Value
None
Remarks
The parameter (day) must contain only three characters. Ex: Sun, Mon, Tue, Wed, Thu, Fri, Sat.
Example
this.view.component.disableDays("Sun");
disableDate

The API disables the date selected by a user.

Syntax
disableDate()
Parameters
String
Return Value
None
Example
this.view.component.disableDate("1/26/2017");
setDefaultDate

The API sets the default date selected by a user.

Syntax
setDefaultDate()
Parameters
String
Return Value
None
Example
this.view.component.setDefaultDate("5/7/2017");

Known Issues

  • No support for changing the Calendar themes.
  • The Calendar consumes more time to render, during the first launch, if the calendar range is beyond 30 years.