Single Date Picker

Single Date Picker

Asset Version: 1.0.0
  • Version 1.0.0
Last Published: Jul 6, 2017 By: Kony Team
1152 1 0 78
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. It also provides an option to user to customize the component by using pass-through and custom properties.

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 Enterprise 8.0

Importing the Single Date Picker Component

Before you import the component to Kony Visualizer, you must download the component from the Kony Marketplace website.

You can import marketplace components into your project only if it is built on the Kony Reference Architecture.

To import the Single Date Picker component, do the following:

  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 FlexForms, FlexContainers and ScrollFlexContainers.

To add a Single Date Picker component, do the following:

  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 is added to the form. You can also see a new element, com.konymp.singledatepicker, in the Components section on the Templates tab.

    Ensure that the component is set to occupy 100 percent width of the device. You can achieve this by setting the width of the parent widget to 100 percent.

 

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. The General properties are the default properties of individual widgets in the component.

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

  1. In the Project Explorer, on the Projects tab, click Controllers section to access the respective formController. Create a method and implement the code snippet similar to the sample code mentioned below.
    /* creating a component's Object */
    var datepicker = new com.konymp.singledatepicker(
    {
    	"clipBounds": true,
    	"height": "9.44%",
    	"id": "datepicker",
    	"isVisible": true,
    	"left": "30%",
    	"top": "50%",
    	"width": "30%",
    	"zIndex": 1
    }, {}, {});
    
    /* Setting the component's properties */
    datepicker.dateLabel = "Date";
    datepicker.selectDateText = "Select Date";
    datepicker.isTodayEnabled = true;
    datepicker.calendarStartDate = "1/15/2000";
    datepicker.calendarEndDate = "12/15/2030";
                
    /*Adding the Single Date Picker component to a Form*/
    this.view.add(datepicker);
    

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

  2. 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. For example, Departure date.
Syntax: dateLabel
Type: String
Read/Write: Read + Write
Remarks The default value of the property is Date.
Example:
this.view.componentID.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.componentID.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.componentID.isTodayEnabled = true;

Calendar Range

Start Date
Description: Specifies the start date of the Calendar.
Syntax: calendarStartDate
Type: String

Read/Write:

Read + Write
Default Value: "1/15/2000" (The format is mm/dd/yyyy)
Remarks

The year must be in a range of 1900 to 2099. This property is rendered at run time.

Example:
this.view.componentID.calendarStartDate= "1/15/2000";
End Date
Description: Specifies the end date of the Calendar.
Syntax: calendarEndDate
Type: String
Read/Write: Read + Write
Default Value: "12/15/2030" (The format is mm/dd/yyy)
Remarks

The year must be in a range of 1900 to 2099. This property is rendered at runtime.

Example:
this.view.componentID.calendarEndDate= "12/31/2045";

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();
Example:
this.view.componentID.onDateSelectionDone = function()
{
	alert(“Date selected”);
}

APIs

getSelectedDate

This API returns the date selected by a user.

Syntax
getSelectedDate();
Parameters
None
Return Value
JSON:

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

This API disables the selection of the specified day.

Syntax
disableDays(dayToDisable);
Parameters
String
Return Value
None
Example
this.view.componentID.disableDays("Sun");
disableDate

This API disables the selection of the specified date.

Syntax
disableDate(dateToDisable);
Parameters
String
Return Value
None
Example
this.view.componentID.disableDate("05/07/2017");
setDefaultDate

This API sets the default date for the component.

Syntax
setDefaultDate(dateString);
Parameters
String
Return Value
None
Example
this.view.componentID.setDefaultDate("05/07/2017");

Limitations

  • Landscape mode is not supported in this version.