Date and Time: Reference Information

In the tables of this topic, you can find reference information about date and time controls.

Conversion from ASPX to HTML and TypeScript

The following tables will help you to convert ASPX elements that are related to date and time controls to HTML or TypeScript elements.

Table 1. PXDateTimeEditThe following table shows the correspondence between the PXDateTimeEdit ASPX control and HTML or TypeScript elements. During the conversion of ASPX pages to HTML and TypeScript, you need to replace these ASPX elements with their analogs in HTML or TypeScript.
ASPX HTML or TypeScript
PXDateTimeEdit
<px:PXDateTimeEdit
  CommitChanges="True"
  ID="edExportedDate_Date"
  runat="server"
  DataField="ExportDate_Date" />
<px:PXDateTimeEdit
  CommitChanges="True"
  ID="edExportedDate_Time"
  runat="server"
  DataField="ExportDate_Time"
  TimeMode="true"
  SuppressLabel="True"
  Width="84" />

To display two separate boxes for date and time, in the TypeScript code of the form, define two fields—a field for the date and a field for the time—as shown in the following code.

export class EmailSyncFilter 
  extends PXView {
  ExportDate_Date:
    PXFieldState<
      PXFieldOptions.CommitChanges>;
  ExportDate_Time:
    PXFieldState<
      PXFieldOptions.CommitChanges>;
}
In HTML code of the form, use the field tag for the date field and a nested qp-field tag for the time field, as the following code shows.
<field name="ExportDate_Date">
  <qp-field
    id="fieldExportTime"
    class="col-3 no-label"
    control-state.bind=
      "EmailSyncFilter.ExportDate_Time"
    config-time-mode.bind="true">
  </qp-field>
</field>
CommitChanges
<px:PXDateTimeEdit
  CommitChanges="True"
  DataField="ExportDate_Date" />
 Use the CommitChanges option of PXFieldState in TypeScript, as the following code shows. With this option, the control commits changes to the server each time a user has changed the value in the box and focus is no longer on the box.
export class EmailSyncFilter 
  extends PXView {
  ExportDate_Date:
    PXFieldState<
      PXFieldOptions.CommitChanges>;
}
DataField
<px:PXDateTimeEdit
  DataField="ExportDate_Date"/>
<px:PXDateTimeEdit
  DataField="ExportDate_Time"/>
 To specify the data fields to be used for the date and time control, use the name attribute of the field tag for the date field, and control-state.bind of the qp-field tag for the time field, as the following code shows.
<field name="ExportDate_Date">
  <qp-field
    control-state.bind=
      "EmailSyncFilter.ExportDate_Time"
  </qp-field>
</field>
ID
<px:PXDateTimeEdit
  ID="edExportedDate_Date"
/>
<px:PXDateTimeEdit
  ID="edExportedDate_Time"
/>
Use the id attribute of the nested qp-field tag for the time field, as the following code shows. The id attribute is not used for field tags.
<field name="ExportDate_Date">
  <qp-field
    id="fieldExportTime"
    control-state.bind=
      "EmailSyncFilter.ExportDate_Time"
  </qp-field>
</field>
SuppressLabel
<px:PXDateTimeEdit
  DataField="ExportDate_Time"
  SuppressLabel="True" />
 To hide the label for a field, use class="no-label" for the field, as the following code shows. For details about the class, see Form Layout: CSS Classes.
<field name="ExportDate_Date">
  <qp-field
    control-state.bind=
      "EmailSyncFilter.ExportDate_Time"
    class="no-label"
  </qp-field>
</field>
TimeMode
<px:PXDateTimeEdit
  DataField="ExportDate_Time"
  TimeMode="true"/>
 To indicate that the field contains time, use the timeMode property of config of the field, as shown in the following code.
<field name="ExportDate_Date">
  <qp-field
    control-state.bind=
      "EmailSyncFilter.ExportDate_Time"
    config-time-mode.bind="true">
  </qp-field>
</field>
Width
<px:PXDateTimeEdit
  DataField="ExportDate_Time"
  Width="84" />
 Use the col-N class to define the width of the field, as the following code shows. In col-N, N is the number of columns the field occupies, which can be a whole number between 1 and 12. For details about the class, see Form Layout: CSS Classes.
<field name="ExportDate_Date">
  <qp-field
    class="col-3"
    control-state.bind=
      "EmailSyncFilter.ExportDate_Time"
  >
  </qp-field>
</field>
Table 2. Obsolete ASPX Controls and PropertiesThe following table lists obsolete ASPX elements that are related to date and time controls. You do not need to replace these ASPX elements with any HTML or TypeScript elements.
ASPX Control Property
PXDateTimeEdit runat

qp-datetime-edit and qp-datetime-edit-utc

The following table lists the properties that are available in the config property of the qp-datetime-edit and qp-datetime-edit-utc controls. The qp-datetime-edit-utc control displays the UTC date and time. The qp-datetime-edit control displays any date and time.

Property Description
allowCustomItems If the value is true, indicates that a user can specify custom values in the control.
allowNull If the value is true, indicates that an empty value is possible for the control.
displayMask Specifies the display mask for the control.
durationMode If the value is true, indicates that the field contains duration intervals.
editMask Specifies the edit mask for the control.
firstDayOfWeek Specifies the first day of the week. The days of the week are defined with numbers from 0 to 6, where 0 is Sunday, and 6 is Saturday.
fullDOW If the value is true, indicates that full names should be displayed for the days of week.
fullMonth If the value is true, indicates that full names should be displayed for months.
height Specifies the height of the control. Generally, you do not need to specify this property.
maxValue Specifies the maximum value that is available in the control.
minValue Specifies the minimum value that is available in the control.
nullText Specifies the value that is displayed if the value in the control is NULL.
preserveTimezone Indicates whether the system should keep the time zone for the date and time. If the value is false, the system converts the date and time to UTC.
timeMode Indicates (if the value is true) that the field contains time. The following code uses this property.
<field name="ExportDate_Date">
  <qp-field
    control-state.bind=
      "EmailSyncFilter.ExportDate_Time"
    config-time-mode.bind="true">
  </qp-field>
</field>
width Specifies the width of the control. Generally you do not need to specify this property. Use the col-N class instead. For details about the class, see Form Layout: CSS Classes.