How to customize jquery mobile datebox customflipbox

Question

I am working in jquerymobile datebox customflip, plugin. i am having problem in 3 things. first in title, how can i change title 'undefined' second how can i change button text 'Looks Good'. Third how can i show text on input instead of index

heres jsfiddle

code

 <h2>Custom Box Mode</h2>

                    <script type="text/javascript">
                    jQuery.extend(jQuery.mobile.datebox.prototype.options, {
                        'customData': [  {
                            'input': true,
                            'name': '',
                            'data': ['Single', 'Separated', 'Involved', 'Married','Widowed','Lover','Other']
                        }],
                        'useNewStyle': false,
                        'overrideStyleClass': 'ui-icon-dice'
                    });
                    </script>
                    <style>
                    .ui-icon-dice {
                        background-image: url('http://dev.jtsage.com/jQM-DateBox/img/dice.png') !important;
                        background-repeat: no-repeat;
                        background-position: 99% 50%;
                    }
                    </style>

                    <div data-role="fieldcontain">
                        <label for="cf">Custom</label>
                        <input name="cf" type="date" data-role="datebox" id="cf" data-options='{"mode": "customflip"}' />
                    </div>

ezanker · Accepted Answer · 2014-04-30 13:43:40Z

4

The button text is modified by the overrideCustomSet property.

var selectdata = ['Single', 'Separated', 'Involved', 'Married', 'Widowed', 'Lover', 'Other'];

jQuery.extend(jQuery.mobile.datebox.prototype.options, {
    "customData": [{ "input": true, "name": "", "data": selectdata }],
     "customDefault": [0],
     "useNewStyle": true,
     "enablePopup": false,
     "centerHoriz": true,
     "centerVert": true,
     "useFocus": true,
     "useButton": false,
     "useHeader": true,
     "overrideCustomSet": "Looks Good",
     "overrideCustomFormat": "%%"   
});

For the other 2 problems you could handle the datebox event. When the event method is postrefresh, set the dialog title, and when the method is set, find the text by index from the array and make it the value of the input.

$('#cf').on('datebox', function (e, p) {
    if (p.method === 'postrefresh') {
        $(".ui-datebox-container h1.ui-title").html("My Title");
    }
    if (p.method === 'set') {
        e.stopImmediatePropagation()
        $(this).val(selectdata[p.value]);
    }
});

Here is your updated FIDDLE

answered Apr 30, 2014 at 13:43

ezanker

24.7k1 gold badge22 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

J.T.Sage Over a year ago

First, wow, didn't know anybody was actually using this. cool. And I'm impressed, you seem to know it better than I do.

J.T.Sage Over a year ago

Second, I'll add an option to override header - right now it's either the label text, or the placeholder attribute. I'll make it hardcodeable.

J.T.Sage Over a year ago

Finally, your second function is not needed. customFormat is not i18n aware, so you can: "customFormat": "%Xa" (%X1... = numeric index, %Xa... = text of option)

ezanker Over a year ago

@J.T.Sage, Thank you for developing jQM plugins! I like it that you provide plenty of flexibility and good documentation. Also, thanks for the comments and suggestions on this question, you are welcome to update my jsFiddle if you like.

J.T.Sage Over a year ago

Here you go - with the changed format, and with a new option "customHead" - jsfiddle.net/rU4S9/18

|

Collectives™ on Stack Overflow

How to customize jquery mobile datebox customflipbox

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related