Customising Dojo DateTextBox - want mm/yy input only

问题

I'm having a little difficulty programming the DateTextBox widget to operate with a month and year only input, and to put a mm/yy format in the DateTextBox. Can anyone help me tidy this up?

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

This DateTextBox JSFiddle shows my weak efforts so far. Alternative methods of getting a mm/yy textbox input without using these widgets are equally welcome.

Just to clarify, if you're going an alternative route, the important bit is a good mm/yy popup which I can use to inject the selected date into the textbox. I'm familiar with different types of text box djits, but not with date selector popups.

I'm using Dojo 1.8 and cannot upgrade so please make your answers compatible with this version

回答1:

I have prepared two modules with screenshot to you which they both match your requirement.

Quickly changing year
Easy to select month and year
skip to select day

Modules:

DateTextBox with MonthAndYearlyCalendar View
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>

回答2:

I suggest use ValidationTextbox, it is more earlier to use and meet your requirement too. Here is the reference link and sample code you could copy and paste(tested in 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'" />

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

PS: you can change the yyyy-MM to MM-yyyy to match your format. But I tried that, the default value will be ignore. (in version 1.8.3).

PS2: users still needed select the day in popup calendar, but the textbox will not show and submit the day.

来源：https://stackoverflow.com/questions/17638682/customising-dojo-datetextbox-want-mm-yy-input-only

标签

javascript

html

dojo

calendar