CODEWITHSUNDEEP
javascripthtmldojocalendar
vogomatix
vogomatix

Reputation: 5041

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

Upvotes: 2

Views: 6030

Answers (3)

Allen Chak
Allen Chak

Reputation: 1950

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

Upvotes: 1

Allen Chak
Allen Chak

Reputation: 1950

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

Upvotes: 2

Allen Chak
Allen Chak

Reputation: 1950

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:

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

Upvotes: 3

Related Questions