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