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=".9.3/dojo/resources/dojo.css" rel="stylesheet" />
<link href=".9.3/dijit/themes/claro/claro.css" rel="stylesheet" />
<script src="//ajax.googleapis/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>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./ajax/libs/dojo/1.9.3/dojo/resources/dojo.css" rel="stylesheet" />
<link href="http://ajax.googleapis./ajax/libs/dojo/1.9.3/dijit/themes/claro/claro.css" rel="stylesheet" />
<script src="//ajax.googleapis./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 wele.
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 patible with this version
Share Improve this question edited Apr 6, 2015 at 21:46 Ruslan López 4,4772 gold badges30 silver badges40 bronze badges asked Jul 14, 2013 at 10:45 vogomatixvogomatix 5,0932 gold badges26 silver badges49 bronze badges 2- Are you prefer there is a UI for selection or text key-in??? – Allen Chak Commented Jul 14, 2013 at 11:07
- I want a text key in with optional mm/yy date picker as the datetextbox provides. – vogomatix Commented Jul 14, 2013 at 11:36
3 Answers
Reset to default 3I 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:
DateTextBoxwith MonthAndYearlyCalendar ViewMonthTextBox
<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>
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./ajax/libs/dojo/1.9.3/dojo/resources/dojo.css" rel="stylesheet" />
<link href="http://ajax.googleapis./ajax/libs/dojo/1.9.3/dijit/themes/claro/claro.css" rel="stylesheet" />
<script src="//ajax.googleapis./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'" />
<link href="http://ajax.googleapis./ajax/libs/dojo/1.9.3/dojo/resources/dojo.css" rel="stylesheet" />
<link href="http://ajax.googleapis./ajax/libs/dojo/1.9.3/dijit/themes/claro/claro.css" rel="stylesheet" />
<script src="//ajax.googleapis./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.