I don't think this is possible with the widget itself. The reason for this is that the datePattern
is used for both input and output. Because you can only show one output, there can only be one pattern. If I run your example and select a data from the dropdown, then the output is 12/08/2012|12082012 for the date 8 december 2012. What it does behind the screens is use the pattern directly to parse/format using the dojo/date/locale
module which doesn't support regular expressions (it's just a simple date pattern).
However, it is not entirely impossible to achieve, you might extend the dijit/form/DateTextBox
and make it work so that there are different patterns for input and output. Look at the code of the diji/form/_DateTimeTextBox
. On line 77 you can see the parse
method that actually converts the input string to a date. You will have to override this function.
An example of overriding the widget is by doing:
declare("custom/DateTextBox", [DateTextBox], {
parse: function(value, constraints) {
var out = null;
if (constraints.inputDatePattern !== undefined) {
var patterns = constraints.inputDatePattern.split('|');
for (var idx = 0; idx < patterns.length && out === null; idx++) {
out = this.dateLocaleModule.parse(value, lang.mixin(constraints, {
datePattern: patterns[idx]
}));
}
} else {
out = this.inherited(arguments);
}
return out || (this._isEmpty(out) ? null : undefined);
}
});
What I actually do here is introducing a new constraint called inputDatePattern
, used to parse the input (while datePattern
will be used for the output). If the inputDatePattern
is not defined, I use the original function to parse the input. If it is defined, then I split the pattern by the pipe symbol (|
) and try each pattern until I get a correct value.
All together this results in a custom datetextbox. You have to change your HTML as well until you et something like this.