Question

In dojo dijit/form/DateTextBox for example

<link href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.3/dojo/resources/dojo.css" rel="stylesheet" />
<link href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.3/dijit/themes/claro/claro.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.9.3/dojo/dojo.js" djConfig="parseOnLoad:true"></script>

<body class="claro">
  <input type="text" name="testDate" data-dojo-id="testDate" class="dateTextBox" value="" data-dojo-type="dijit/form/DateTextBox" id="scheduledDate" data-dojo-props="constraints:{datePattern: 'MM/dd/yyyy|MMddyyyy'}">

in this you all can see, that I am trying to use two date formats. But this is working for the format that is first, in this case MM/dd/yyyy. But MMddyyyy is not working.

Please help me out in this....

Was it helpful?

Solution

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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top