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>
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