2017-09-27 8 views
3

Je veux changer le format d'affichage de la date pour dijit dateTextBox.
Actuellement ma date affiche comme celui-ciComment afficher et valider au format personnalisé en utilisant Dijit DateTextBox?

enter image description here

Ma déclaration est comme ce

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

Mais je voudrais changer le format à un format que je veux par exemple 14 Septembre, 2017, ou 09-14-2017.

De plus, si vous entrez le format à l'aide du clavier, est-il possible de valider par rapport au même format - I.e. Lorsque l'utilisateur tape les données, il doit être dans ce format ou le message invalide apparaît.

EDIT: Tout ce que je pouvais trouver était question des contraintes qui vous permet de définir à la fois les contraintes d'entrée et la mise en forme - mais il n'y a pas d'exemples dans la documentation comment l'utiliser. Ce serait bien de voir à la fois un exemple déclaratif et un exemple programmatique.

enter image description here

également selon certains autres postes ici dans le balisage déclaratif vous pouvez spécifier des contraintes comme

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

Cependant, je veux faire ce programme, mais quand j'inspecte l'objet d'entrée

this.theInput.constraints 

il n'existe aucune propriété telle que datePattern, ou min et max.

Répondre

4

Il est possible à la fois le code programmatique et déclarative:

  1. par exemple déclarative:

vient de mettre votre modèle, min, max dans les contraintes accessoires comme:

<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" /> 

Voir travail violon

require(["dijit/form/DateTextBox","dojo/parser", "dijit/form/Button","dojo/on" , 
 
    "dojo/domReady!" 
 
], function(DateTextBox,parser,Button, On) { 
 
\t \t 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>

Ou cette FIddle

  1. par exemple programatic:

vous avez juste à utiliser pour accéder directement aux contraintes objet et définir votre valeur de contrainte là Mydateinput.constraints.contName = value comme

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

Voir utilisation snippet

require(["dijit/form/DateTextBox", "dijit/form/Button","dojo/on" , 
 
    "dojo/domReady!" 
 
], function(DateTextBox,Button, On) { 
 
\t \t 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>

Ou le Fiddle