Как вы отображаете и проверяете пользовательский формат с помощью Dijit DateTextBox?

Я хочу изменить формат отображения даты для dijit dateTextBox.
В настоящее время моя дата отображается следующим образом

введите здесь описание изображения

Мое заявление такое

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

Но я хотел бы изменить формат на любой, например, 14 сентября 2017 года или 14 сентября 2017 года.

Также, при вводе формата с клавиатуры, можно ли проверить соответствие этому же формату - т.е. когда пользователь вводит данные, они должны быть в этом формате, иначе появляется недопустимое сообщение.

РЕДАКТИРОВАТЬ: все, что я смог найти, это упоминание об ограничениях, которые позволяют вам устанавливать как ограничения ввода, так и форматирование, но в документации нет примеров того, как это использовать. Было бы неплохо увидеть как декларативный, так и программный пример.

введите здесь описание изображения

Также, согласно некоторым другим сообщениям здесь, в декларативной разметке вы можете указать ограничения, например

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

Однако я хочу сделать это программно, но когда я проверяю входной объект

this.theInput.constraints

нет такого свойства, как datePattern или min и max.


javascript date dojo dijit.form
person erotavlas    schedule 27.09.2017    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Это возможно как для программного, так и для декларативного кода:

  1. для декларативного примера:

просто поместите свой шаблон, 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

  1. для программного примера:

вы просто должны использовать для прямого доступа к объекту ограничений и установить значение ограничения тамMydateinput.constraints.contName = value, например

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

person Spring    schedule 28.09.2017