javascript-如何使用Dijit DateTextBox显示和验证自定义格式？

我想更改dijit dateTextBox日期的显示格式.
目前我的日期显示如下

我的声明是这样的

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

但我想将格式更改为我想要的任何格式,例如2017年9月14日或2017年9月14日.

另外,如果使用键盘输入格式,是否可以针对相同格式进行验证-即当用户键入数据时,该格式必须为该格式,否则将显示无效消息.

编辑：
我所能找到的只是提到了约束,该约束使您可以设置输入约束和格式设置-但是文档中没有使用该约束的示例.看到说明性和程序性示例都很好.

另外,根据声明性标记的此处其他文章,您可以指定约束,例如

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

但是我想以编程方式执行此操作,但是当我检查输入对象时

this.theInput.constraints

没有诸如datePattern或min和max的属性.

解决方法:

程序性代码和声明性代码都可能：

>作为示例：

只需将您的模式,min,max放在约束道具中,例如：

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

查看工作提琴

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>

或这个FIddle

>对于程序示例：

您只需要用来直接访问约束对象并在那里设置约束值Mydateinput.constraints.contName = value like

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

查看工作片段

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>

或Fiddle

javascript-如何使用Dijit DateTextBox显示和验证自定义格式？

相关推荐