Dojo. How to add attributes in form elements?

Question

I have a form where the widgets are instatiated using the declarative syntax.

<script>
require(["dojo/parser",
    "dijit/form/Form",
    "dijit/form/Button",
    "dijit/form/ValidationTextBox",
    "dijit/form/DateTextBox" ,
    "dojox/validate/web",
    "dojox/form/PasswordValidator",
    "dijit/form/FilteringSelect" ,
    "dijit/form/Button",
    "dijit/form/Select",
    "dojo/dom",
    "dojo/dom-attr"

]);

<div data-dojo-type="dijit/form/Form" id="signupForm" data-dojo-id="signupForm"
     encType="multipart/form-data" action="" method="">
    <input type='hidden' name='csrfmiddlewaretoken' value='xxxxxxxxxxxx' />

        <label for="id_username">Username:</label>
        <input autofocus="autofocus" data-dojo-type="dijit/form/ValidationTextBox" id="id_username" maxlength="30" name="username" placeholder="Username" type="text" />

This form is built from a django template and I would like to use the django SelectDateWidget which displays three widgets for date, month and year. The problem is that it is not possible to display those fields separately in the template. I have to add dojo attributes after they are loaded in the browser. Something like

<script>
    dojo.attr(dom.byId("id_birth_date_month"), {data-dojo-type:"dijit/form/Select", data-dojo-id:"monthSelect"});
    dojo.attr(dom.byId("id_birth_date_year"), {data-dojo-type:"dijit/form/Select", data-dojo-id:"monthSelect"});
</script>

the above offcourse doesn't work. How can I do it?

Answer 1

I found two ways to do this. I hope they help someone else.

First the dojo way

<script>
    require(["dojo/parser",
    "dijit/form/Select",
    "dojo/dom"], function (parser, Select, dom) {
        dojo.attr(dom.byId("id_birth_date_month"), {"data-dojo-type":dijit/form/Select",       
                                                    "data-dojo-id": "monthSelect"});
    // similar lines for day and year
     });
</script>

    <!-- ...later in the code-->   
    <select  id="id_birth_date_month">
    ...
    </select>

    <!-- two other similar selects for day and year-->

This is a form that it is loaded inside a floating pane so parser.parse() etc have already run. I am not sure why declarative syntax works after the parsing has been done but this approach worked.

The second way is from django. Define the attributes in the form field itself. This is the approach I took.

class SignupForm(Form):

# other form fields
    birth_date = DateField(widget=SelectDateWidget(years=range(yearNow - 13, yearNow - 100, -1),attrs={"data-dojo-type": "dijit/form/Select", "data-dojo-id": "birthDateSelect"}), required=True, initial="", label=_('Birth Date'))
# other form fields

Unfortunately all three fields (year, month day) get the same data-dojo-id and I don't know if this is a problem. for the time being it works and I don't see anything strange.