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>

Answer 1

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