How do you display and validate to custom format using Dijit DateTextBox?

user_1462656 0
Viewed 892

I want to change the display format of the date for dijit dateTextBox.
Currently my date is displaying like this

enter image description here

My declaration is like this

<input type="text" data-dojo-type="dijit/form/DateTextBox" data-dojo-attach-point="theInput"  />

But I would like to change the format to any format I want for example September 14, 2017, or 09-14-2017.

Also if entering the format using keyboard, is it possible to validate against that same format - I.e. when user types in the data it has to be in that format or the invalid message appears.

EDIT: All I could find was mention of the constraints which allows you to set both the input constraints and formatting - but there are no examples in the documentation how to use this. It would be nice to see both declarative and programmatic example.

enter image description here

Also according to some other posts here in declarative markup you can specify constraints like

data-dojo-props="constraints:{datePattern:'yyyy-MM'}"

However I want to do this programmatically but when I inspect the input object 

this.theInput.constraints

there is no such property as datePattern, or min and max.

dijit.form dojo date javascript
1 Answers

It's possible for both programmatic and declarative code :

  1. for declarative example :

just put your pattern , min , max in the constraints props like :

<input type="text" name="shortYear" data-dojo-type="dijit/form/DateTextBox" data-dojo-props="constraints:{datePattern: 'MM-dd-yyyy',min:'2016-12', max:'2018-06'}" value="09-14-2017" required="true" />

See working fiddle 

require(["dijit/form/DateTextBox","dojo/parser", "dijit/form/Button","dojo/on" ,
  "dojo/domReady!"
], function(DateTextBox,parser,Button, On ) {
  parser.parse();
});
<link href="https://ajax.googleapis.com/ajax/libs/dojo/1.10.0/dijit/themes/claro/claro.css" rel="stylesheet"/>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<body class="claro">
<input type="text" name="shortYear" data-dojo-type="dijit/form/DateTextBox" data-dojo-props="constraints:{datePattern: 'MM-dd-yyyy',min:'2017-09-03', max:'2018-01-01'}" value="09-14-2017" required="true" />
</body>

Or this FIddle

  1. for programatic example :

you've just to use to access directly the constraints object and set your constraint value thereMydateinput.constraints.contName = value like 

myDateBox.constraints.datePattern  = 'MM-dd-yyyy'
myDateBox.constraints.min = new Date();
myDateBox.constraints.max = new Date("yyyy-MM-dd")

See working snippet

require(["dijit/form/DateTextBox", "dijit/form/Button","dojo/on" ,
  "dojo/domReady!"
], function(DateTextBox,Button, On ) {
  datebox = new DateTextBox({
    }, "date");
    datebox.constraints.datePattern = 'MM-dd-yyyy';
    
    datebox.constraints.min = new Date("2017/09/03");
    datebox.constraints.max = new Date("2018/01/01")
    
    datebox.startup();
});
<link href="https://ajax.googleapis.com/ajax/libs/dojo/1.10.0/dijit/themes/claro/claro.css" rel="stylesheet"/>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>

<body class="claro">
  <div id="date" ></div>
</body>

Or the Fiddle

user_29324760
Related