jQM 1.4 DateBox custom flip

by Erik Zanker

HTML

<link rel="stylesheet" href="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.min.css">
<script src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.core.min.js"></script>
<link rel="stylesheet" href="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog.min.css">
<script src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.customflip.min.js"></script>
<script src="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog.min.js"></script>
<div data-role="fieldcontain">
    <label for="cf" data-i18n="config.localelabel"></label>
    <input name="cf" type="date" data-role="datebox" id="cf" data-options='{"mode":        "customflip",
"useNewStyle": false,
"overrideStyleClass": "ui-icon-dice",
"useButton":false,
"useFocus" : true
}' />

CSS

.ui-icon-dice {
     background-image: url('http://dev.jtsage.com/jQM-DateBox/img/dice.png') !important;
     background-repeat: no-repeat;
     background-position: 99% 50%;
 }

JavaScript

var selectdata = ["Italiano","English","Espanol","Deutsch","Francais","русский"];
jQuery.extend(jQuery.mobile.datebox.prototype.options, {
    'customData': [{
        'input': true,
            'name': '',
            'data': selectdata
    }],
        "useHeader": false,
        "overrideCustomSet": "OK"
});

$('#cf').on('datebox', function (e, p) {
    if (p.method === 'set') {
        e.stopImmediatePropagation();
        $(this).val(selectdata[p.value]);
    }
});