Loading...

DateTime

Properties API Related

Widget Type:
Form Widgets
TPC Version:
  • 4.0
date-time-
The DateTime widget allows you to select a date and time with a built-in calendar, which will be automatically entered into the input textbox. 

The calendar also comes with the ability to set custom blackout dates among other options, including the ability to select date or time individually.

datetime_with_blackouts

Configuration

Basic

Make sure you have a CRM Form Configuration and a TPC Form Layout already attached and configured. This will reveal all DateTime Attributes available to the Entity selected in the Form Configuration. 

Drag and drop the CRM DateTime widget from The Portal Connector tools into the body of your form and click edit to display the properties prompt.

The Title will allow you to set the label for the control. By default it is set to the whichever attribute you choose but it can be freely modified.

The Attribute dropdown list allows you to select an attribute for the widget to submit data to.

The Read Only checkbox will not allow the user to interact with the widget when checked. 

The Hidden checkbox will hide the widget from the form when checked.

The Required checkbox will not allow the user to submit the form until they've populated the widget with data. When checked, a textfield will display, allowing you to set an error message.


datetime-instructions

Appearance 

The Appearance tab contains the option to customize the format of the DateTime widget, including the ability to set a custom format. Available options include: Date for just dates, Time for just time, DateTime for both, and Custom. 

The custom option allows you to specify a format for a chosen date or time to appear as. More information on DateTime format strings can be found here.
datetime-instructions2

Blackout Dates

You can create a list of unselectable dates from Blackout Dates tab. These are all optional settings.

Min Allowable Date will blank out all prior dates out of the calendar.

Max Allowable Date will blank out all following dates out of the calendar.

Blackout Weekends will render all weekends unselectable.

Use Global Blackout Dates will blank out dates specified in Sitefinity. You can customize this from the Sitefinity backend underneath:

The Portal Connector > Blackout Dates.

You can also input Custom Blackout Dates into a list unique to each widget. Select a date and click +Add to add the current selected date to the list.

datetime-instructions3

Widget Properties

Basic Properties

Title

The Title text box will allow you to set the label of your widget. The title will usually appear above the associated widget.

Attribute

The Attribute drop down list will allow you to change the data field that this widget will save the user’s input to (For example, a CRM Text Field with an Attribute of Account Name will save its input to the Account Name data field).

Read Only

The Read Only checkbox will not allow the user to interact with the widget when checked.

IsHidden

Allows you to hide the widget when this property is set to true

Required Field

The Required Field checkbox will not allow a user to successfully submit the form until there is data within it. 

Upon selecting the checkbox, you will be prompted to enter an error message for invalid input.

ClientSideRequired

Allows you to enable or disable "required" from client side  

Invalid Format Violation Message

Display error message when invalid format entered.

TimeZone Selection Options

This property enables you to select a time zone for the date and time field widget. By default it set to Auto. by setting the value to User will enable the end user to select the time zone.

Date Format

The Format dropdown list allows you to choose between date, date & time, time, or a custom format. This will adjust the widget accordingly. If a custom format is selected, you will be provided with a textfield to set a custom format. More information on DateTime formats can be found here.

Use Current Date and Time

This checkbox will appear when a DateTime attribute is chosen for the Static Value Field property.

Enabling this option will submit the current date and time into the chosen attribute.

Tool Tip

The Tool Tip allows you to add a description or Hint to your widget.

ToolTipPosition

This property determines the position of the tool tip. By default this property is set to "Auto". You can change this to Left , Right , Top , Bottom. 

Hide Title

You can hide the title by setting the property value to true

Max Allowable Date

The Max Allowable Date property is used to limit user input. Users will not be able to choose any date that is after a set maximum allowable date. When this property is set, you will be provided with a textfield to specify an error message for this event.

Min Allowable Date

The Min Allowable Date property is used to limit user input. Users will not be able to choose any date that is before a set minimum allowable date. When this property is set, you will be provided with a textfield to specify an error message for this event.

Blackout Weekends

The Blackout Weekends checkbox will automatically black out weekends from selection.

Use Global Blackout Dates

The Use Global Blackout Dates property will automatically block out certain dates based on the time zone region set for the website, such as holidays.

Custom Blackout Dates

The Custom Blackout Dates property allows the user to define their own blackout dates for the widget to use.

LabelPosition

The LabelPosition advanced property specifies where the label of a widget will appear. By default, the label will appear on top of the widget. Applicable options include: Top and left. The content of the label is controlled by the Title property. The default value for this is 'Top'.

Advanced Properties

Advanced properties provide additional functionality. They can be accessed by clicking on the "Advanced" Button in the bottom right corner of the widget designer.

Title

The Title text box will allow you to set the label of your widget. The title will usually appear above the associated widget.

Attribute

The Attribute drop down list will allow you to change the data field that this widget will save the user’s input to (For example, a CRM Text Field with an Attribute of Account Name will save its input to the Account Name data field).

Read Only

The Read Only checkbox will not allow the user to interact with the widget when checked.

IsHidden

Allows you to hide the widget when this property is set to true

Required Field

The Required Field checkbox will not allow a user to successfully submit the form until there is data within it. 

Upon selecting the checkbox, you will be prompted to enter an error message for invalid input.

ClientSideRequired

Allows you to enable or disable "required" from client side  

Invalid Format Violation Message

Display error message when invalid format entered.

TimeZone Selection Options

This property enables you to select a time zone for the date and time field widget. By default it set to Auto. by setting the value to User will enable the end user to select the time zone.

Date Format

The Format dropdown list allows you to choose between date, date & time, time, or a custom format. This will adjust the widget accordingly. If a custom format is selected, you will be provided with a textfield to set a custom format. More information on DateTime formats can be found here.

Use Current Date and Time

This checkbox will appear when a DateTime attribute is chosen for the Static Value Field property.

Enabling this option will submit the current date and time into the chosen attribute.

Tool Tip

The Tool Tip allows you to add a description or Hint to your widget.

ToolTipPosition

This property determines the position of the tool tip. By default this property is set to "Auto". You can change this to Left , Right , Top , Bottom. 

Hide Title

You can hide the title by setting the property value to true

Max Allowable Date

The Max Allowable Date property is used to limit user input. Users will not be able to choose any date that is after a set maximum allowable date. When this property is set, you will be provided with a textfield to specify an error message for this event.

Min Allowable Date

The Min Allowable Date property is used to limit user input. Users will not be able to choose any date that is before a set minimum allowable date. When this property is set, you will be provided with a textfield to specify an error message for this event.

Blackout Weekends

The Blackout Weekends checkbox will automatically black out weekends from selection.

Use Global Blackout Dates

The Use Global Blackout Dates property will automatically block out certain dates based on the time zone region set for the website, such as holidays.

Custom Blackout Dates

The Custom Blackout Dates property allows the user to define their own blackout dates for the widget to use.

LabelPosition

The LabelPosition advanced property specifies where the label of a widget will appear. By default, the label will appear on top of the widget. Applicable options include: Top and left. The content of the label is controlled by the Title property. The default value for this is 'Top'.

API

disable()

Disables the widget on the form.

Returns

None

get_timeZoneKendo()

Returns the Kendo DropDownList Object related to the widget.

Returns

Kendo Object: kendo.ui.DropDownList

get_fetchValue()

Returns UTC time.

Returns

String

required()

Enables or disables client side required on the widget.

Returns

None

get_value()

Returns the value of the widget.

Returns

String

remove_valueChanged()

Removes any delegate hooked up to the add_valueChanged() event.

Returns

None

get_type()

Returns the widget type.

Returns

String

get_zoneSelector()

Returns the time zone selector when it is enabled.

Returns

jQuery Object

get_displayInput()

Returns the DateTime display associated with the widget.

Returns

jQuery Object

enable()

Enables the widget on the form.

Returns

None

clear()

Clears the value of the widget.

Returns

None

add_valueChanged()

Fired when the value of the widget is changed by the user.
The event handler function context (available via the this keyword) will be set to the widget instance.

Returns

None

get_model()

Returns the model object of the widget, which contains a number of useful properties related to the widget.
In the case of the DateTime widget, these returned properties and their types are:

  • BlackoutDates: Array
  • BlackoutWeekends: Boolean
  • DateTimeFormat: String
  • InputMode: Integer
  • MaxDate. String
  • MinDate: String
  • ReadOnly: Boolean

Returns

Object

get_kendoInput()

Returns the Kendo DateTimePicker Object associated with the widget.

Returns

Kendo Object: Kendo.ui.DateTimePicker

get_input()

Returns the HTML element associated with the widget.     

Returns

jQuery Object

get_element()

Returns the HTML input element associated with the widget.

Returns

jQuery Object

get_container()

Returns the container element associated with the widget.

Returns

jQuery Object

hide()

Hides the widget from the form.

Returns

None

show()

Shows the widget on the form.

Returns

None

set_value()

Sets the value of the widget.
There are a number of ways to set the value of the widget.

Returns

None

toggle()

Toggles the visibility of the widget.

Returns

None     

readonly()

Sets the widget state to read only.

Returns

None

Full API With Examples