ClassExtender: adding date widget to extended user date fields in Manager

86 Posts

kjf Reply #1, 11 years, 3 months ago

I'm using the chunk 'MyExtraUserFields' to incorporate my extended user fields into the User Profile form in Manager. I'd like to use the same date widget that appears on the default user profile fields (like date of birth, etc.) on my custom date fields, but haven't figured out how to make the widget appear.

Here's an example of one of my extended user profile date fields:

...
<div class="x-form-item x-tab-item">
    <label class="x-form-item-label" style="width:auto; font-weight:bold; float:none; font-size:12px">Last Payment Date mm/dd/yyyy)/label>
    <div class="x-form-item x-tab-item">
        <input type="date" autocomplete="off" name="lastPymtDate" value="[[+lastPymtDate:strtotime:date=`%m/%d/%Y`]]" class="x-form-text x-form-field x-form-focus" 
onClick="Ext.getCmp('modx-panel-user').markDirty();"/>
    </div>
</div>
...

Any pointers?

Thanks in advance,

Karl Forsyth

24,544 Posts

BobRay Reply #2, 11 years, 3 months ago

I wish I could help. There's a custom datepicker in NewsPublisher, but that's for the front end. I've never tried implementing one in the Manager.

My only advice would be to look at source of the Manager page in Chrome Dev. Tools or Firefox and see how it's done. You can't see it with "View Source" because almost everything is created on the fly with JavaScript. Once the page is loaded, though, it's all visible in Dev. Tools and Firefox.

Did I help you? Buy me a beer
Get my Book: MODX:The Official Guide
MODX info for everyone: http://bobsguides.com/modx.html
My MODX Extras
Bob's Guides is now hosted at A2 MODX Hosting

86 Posts

kjf Reply #3, 11 years, 3 months ago

I have looked at the generated code using Firefox's developer panel (Shift-Ctrl-C), and this is what I see for the Date of Birth field:

div id="ext-gen129" class="x-form-item x-tab-item" tabindex="-1">
    <label id="ext-gen130" class="x-form-item-label" style="width:auto;" for="modx-user-dob">Date of birth</label>
    <div id="x-form-el-modx-user-dob" class="x-form-element" style="padding-left:0;">
        <div id="ext-gen131" class="x-form-field-wrap x-form-field-trigger-wrap x-trigger-wrap-focus" style="width: 198px;">
            <input id="modx-user-dob" class="x-form-text x-form-field x-form-focus" type="text" name="dob" autocomplete="off" size="10" style="width: 160px;" title=""></input>
            <div id="ext-gen132" class="x-form-trigger x-form-date-trigger"></div>
    </div>
</div>

As you said, it's apparent from the above example that at least some of the ids and classes are being generated on the fly by Javascript. When I use the same classes in my extended date fields, no date widget appears. Probably, the id code plays an important role, but I can't find the Javascript code that does the page rewriting, so I'm shooting in the dark here.

Karl

24,544 Posts

BobRay Reply #4, 11 years, 3 months ago

I don't know how to modify that for use in another field. Maybe someone else can help.

Did I help you? Buy me a beer
Get my Book: MODX:The Official Guide
MODX info for everyone: http://bobsguides.com/modx.html
My MODX Extras
Bob's Guides is now hosted at A2 MODX Hosting

132 Posts

aesmith - enminc Reply #5, 11 years ago

kjf,

Did you ever solve this one. By adjusting the ids to be unique (from copy and pasted DOB markup) I was able to get date field to visually show but not functional.

I assume there is a bind to the js that is not happening.

"One of these days I will get around to my own website... Its only been about 12 years... maybe tomorrow

"

86 Posts

kjf Reply #6, 11 years ago

aesmith,

No, I never got a datepicker to work on a date field in the 'MyExtraUserFields' chunk, but the date field works and is editable. I just manually enter the date rather than use a datepicker.

Here's an example of a date in the 'MyExtraUserFields' chunk:

<div class="x-form-item x-tab-item">
    <label class="x-form-item-label" style="width:auto; font-weight:bold; float:none; font-size:12px">Membership Expire Date (mm/dd/yyyy)</label>

    <div class="x-form-item x-tab-item">
        <input type="date" name="memberExpireDate" value="[[+memberExpireDate:strtotime:date=`%m/%d/%Y`]]" class="x-form-text x-form-field"
                onClick="Ext.getCmp('modx-panel-user').markDirty();"/>
    </div>
</div>

132 Posts

aesmith - enminc Reply #7, 11 years ago

Thanks for sharing. If when I get this figured out, I will post back. I imagine it all needs to be handled in js and not in hardcoded html

"One of these days I will get around to my own website... Its only been about 12 years... maybe tomorrow

"

86 Posts

kjf Reply #8, 11 years ago

Cool. Thanks!