2

我在对 DateTextBox 小部件进行编程以仅使用月份和年份输入并在 DateTextBox 中放置 mm/yy 格式时遇到了一点困难。谁能帮我整理一下？

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

  <div id="dt_text" data-dojo-type="dojox/form/DateTextBox" data-dojo-props="popupClass: 'dojox/widget/MonthAndYearlyCalendar'">
  </div>

这个DateTextBox JSFiddle显示了我迄今为止的薄弱努力。同样欢迎在不使用这些小部件的情况下获取 mm/yy 文本框输入的替代方法。

澄清一下，如果你要走另一条路，重要的是一个很好的 mm/yy 弹出窗口，我可以用它来将选定的日期注入到文本框中。我熟悉不同类型的文本框 djits，但不熟悉日期选择器弹出窗口。

我正在使用 Dojo 1.8 并且无法升级，所以请让您的答案与此版本兼容

4

3 回答 3

3

我为您准备了两个带有屏幕截图的模块，它们都符合您的要求。

  • 快速变化的年份
  • 易于选择月份和年份
  • 跳至选择日期

模块：

  1. DateTextBox使用 MonthAndYearlyCalendar 视图
  2. MonthTextBox
    <link rel="stylesheet" href="scripts/dojo/dojox/grid/resources/claroGrid.css">
    <link rel="stylesheet" href="scripts/dojo/dojox/widget/Calendar/Calendar.css">

    <script>
        dojo.require("dojox.widget.MonthAndYearlyCalendar");
    </script>

    <body class="claro">
        <input type="text" name="monthNyear" value="11/2013" data-dojo-type="dojox/form/DateTextBox" data-dojo-props="constraints:{datePattern: 'MM/yyyy'}, popupClass:'dojox.widget.MonthAndYearlyCalendar'" />
        <input type="text" name="monthOnly" value="11" data-dojo-type="dojox/form/MonthTextBox" />
    </body>
于 2013-07-15T04:49:50.800 回答
2

我建议使用ValidationTextbox，它更早使用并且满足您的要求。这是您可以复制和粘贴的参考链接和示例代码（在 1.8.3 中测试）

<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="monthNyear" id="monthNyear" value="12/99" required="true" data-dojo-type="dijit/form/ValidationTextBox" data-dojo-props="regExp:'\\d{2}\/\\d{2}', invalidMessage:'Invalid mm/yy'" />

于 2013-07-14T11:54:37.373 回答
1 

<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="skippedDay" data-dojo-type="dijit/form/DateTextBox" data-dojo-props="constraints:{datePattern:'yyyy-MM'}" value="2013-12" />

PS：您可以更改yyyy-MM为MM-yyyy以匹配您的格式。但我试过了，默认值将被忽略。（在版本 1.8.3 中）。

PS2：用户仍然需要在弹出日历中选择日期，但文本框不会显示并提交日期。

于 2013-07-14T15:03:08.233 回答