DateTimePicker

The DateTimePicker control represents a text-box control with the ability to parse and select dates from a popup calendar and times from a popup list.

Server side

Getting and setting the control's value

Use the DateTimePicker.Value property to get or set the control's value.

Customizing the control

The DateTimePicker control exposes a set of properties, allowing full control over user input. You can specify the format in which the input is expected by setting the CustomDateFormat property. By using MinDate, MaxDate, MinTime and MaxTime properties you can limit the input to a specified date time range and by setting the AllowEmptyInput property you can define whether or not empty string values are considered valid for the control.

Adjust the interaction with the control by setting the SubmitOnEnter and DatePartSelect properties according to your needs.

The control offers a built-in functionality for parsing incomplete user input which can be enabled by setting the AutoComplete property.

The position of a popup can be adjusted by using the PopupAlignRight and PopupAlignTop properties.

Events

The following events are exposed by the DateTimePicker class.

Event	Event arguments	Description
ValueChanged	ValueChangedEventArgs<Nullable<DateTime>>	Raised when the control's value has changed.

Client side

Getting a reference to the control

You can access the control on the client side by its ClientID.

JavaScript

var dateTimePicker = $find("DateTimePicker1");
var dateTimePicker = $find("<%= DateTimePicker1.ClientID %>");

Getting and setting the control's value

Use the get_value and set_value methods to get or set the control's value.

JavaScript

dateTimePicker.set_value(new Date(2010, 0, 1, 13, 15, 12));
alert(dateTimePicker.get_value());

Handling invalid user input

Handle the stateChanged and/or valueInvalid events to apply special processing in case of invalid user input, e.g. change the CSS class of the control's date time input.

JavaScript

function onStateChanged(sender, args)
{
    if (args.getNewState() == MindFusion.UI.Web.ValidationState.Invalid)
    {
        Sys.UI.DomElement.addCssClass(sender.Dom.textbox, "invalid");
    }
    else
    {
        Sys.UI.DomElement.removeCssClass(sender.Dom.textbox, "invalid");
    }
}

Events

The following client-side event are exposed by the DateTimePicker class.

Event	Event arguments	Script property	Description
valueChanged	ValueChangedEventArgs	ValueChangedScript	Raised when a control value has changed.
valueInvalid	ValueChangedEventArgs	ValueInvalidScript	Raised when the date input is invalid.
validationStateChanged	ValidationStateChangedEventArgs	ValidationStateChangedScript	Raised when the validation state of the control changes.
controlLoaded	-	ControlLoadedScript	Raised just after the control has finished loading and is ready for interaction.
popupOpen	PopupEventArgs	PopupOpenScript	Raised when the control's popup is opened.
popupClose	PopupEventArgs	PopupCloseScript	Raised when the control's popup is closed.
popupOpening	PopupEventArgs	PopupOpeningScript	Raised when the control's popup is about to be opened.
popupClosing	PopupEventArgs	PopupClosingScript	Raised when the control's popup is about to be closed.