Drum.js日期框仅选择选项可见

Question

我使用了一个jquery插件drum.js来创建一个模仿iphone日期滚轮的日期框。 github repo

Demo

首先，我复制了代码并对我的页面进行了调整，但它不起作用，所以我只是复制并粘贴以查看示例代码是否可以在我的页面上运行而且它没有。

我尝试将整个区域的背景和所有内部div设置为白色，并将所有div的颜色设置为黑色。似乎没有任何帮助。

我在我的网站上使用bootstrap3。

有没有人知道如何才能显示其他选项？

非常感谢你！

CSS：

<link href="../assets/global/plugins/drum/drum.min.css" rel="stylesheet" type="text/css"/>
<style type='text/css'>
div.date_wrapper {
width: 200px;
position:relative;
}
div.date_wrapper .date_header {
height: 25px;
font-weight: 400;
border-bottom: 1px solid #CCC;
margin-bottom: 10px;
}
div.date_wrapper .date_header span.title {
float: left;
text-align: left;
}
div.date_wrapper .date_header span.selection {
float: right;
text-align: right;
color: #000;
}
div.date_wrapper form {
position: relative;
}
div.date_wrapper .lines {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-top: solid 1px #CCC;
border-bottom: solid 1px #CCC;
position: absolute;
top: 58px;
left: 0px;
width: 100%;
height: 24px;
}
div.date_wrapper .lines div {
margin-left: 220px;
line-height: 21px;
}
div.drum-wrapper {
float: left;
}
div.drum figure {
color:#000;
text-align: left;
}
#drum_hours figure,  #drum_date figure {
text-align: right;
}
#drum_date, #drum_to_date {
margin-left: 10px;
margin-right: 5px;
}
#drum_date,  #drum_hours,  #drum_minutes {
width: 30px;
}
#drum_hours {
margin-left: 10px;
}
#drum_minutes {
margin-left: 4px;
}
#drum_month {
width: 90px;
}
#drum_fullYear {
width: 45px;
}
#drum_hours .dial div {
margin: 0 7px;
}
#drum_minutes .dial div {
margin: 0 2px;
}
</style>

Html：

<div class='date_wrapper outside'>
<div class="lines"></div> <div class='inside'><select class="date" id="date" name="date" data-for='primary_date_of_birth'> <option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option></select></div>
    <div class='inside'><select class="date" id="month" name="month" data-for='primary_date_of_birth'><option value='0'>ינואר</option><option value='1'>פברואר</option><option value='2'>מרץ</option><option value='3'>אפריל</option><option value='4'>מאי</option><option value='5'>יוני</option><option value='6'>יולי</option><option value='7'>אוגוסט</option><option value='8'>ספטמבר</option><option value='9'>אוקטובר</option><option value='10'>נובמבר</option><option value='11'>דצמבר</option></select></div><div class='inside'>
    <select class="date" id="fullYear" name="fullYear" data-for='primary_date_of_birth'><option value='1936'>1936</option><option value='1937'>1937</option><option value='1938'>1938</option><option value='1939'>1939</option><option value='1940'>1940</option><option value='1941'>1941</option><option value='1942'>1942</option><option value='1943'>1943</option><option value='1944'>1944</option><option value='1945'>1945</option><option value='1946'>1946</option><option value='1947'>1947</option><option value='1948'>1948</option><option value='1949'>1949</option><option value='1950'>1950</option><option value='1951'>1951</option><option value='1952'>1952</option><option value='1953'>1953</option><option value='1954'>1954</option><option value='1955'>1955</option><option value='1956'>1956</option><option value='1957'>1957</option><option value='1958'>1958</option><option value='1959'>1959</option><option value='1960'>1960</option><option value='1961'>1961</option><option value='1962'>1962</option><option value='1963'>1963</option><option value='1964'>1964</option><option value='1965'>1965</option><option value='1966'>1966</option><option value='1967'>1967</option><option value='1968'>1968</option><option value='1969'>1969</option><option value='1970'>1970</option><option value='1971'>1971</option><option value='1972'>1972</option><option value='1973'>1973</option><option value='1974'>1974</option><option value='1975'>1975</option><option value='1976'>1976</option><option value='1977'>1977</option><option value='1978'>1978</option><option value='1979'>1979</option><option value='1980'>1980</option><option value='1981'>1981</option><option value='1982'>1982</option><option value='1983'>1983</option><option value='1984'>1984</option><option value='1985'>1985</option><option value='1986'>1986</option><option value='1987'>1987</option><option value='1988'>1988</option><option value='1989'>1989</option><option value='1990'>1990</option><option value='1991'>1991</option><option value='1992'>1992</option><option value='1993'>1993</option><option value='1994'>1994</option><option value='1995'>1995</option><option value='1996'>1996</option><option value='1997'>1997</option></select></div></div>

使用Javascript：

        Hammer.plugins.fakeMultitouch();
function getIndexForValue(elem, value) {
for (var i=0; i<elem.options.length; i++)
if (elem.options[i].value == value)
return i;
}

function pad(number) {
if ( number < 10 ) {
return '0' + number;
}
return number;
}

function updateIDate(datetime) {
$("#date").drum('setIndex', datetime.getDate()-1); 
$("#month").drum('setIndex', datetime.getMonth()); 
$("#fullYear").drum('setIndex', getIndexForValue($("#fullYear")[0], datetime.getFullYear())); 
}

$("select.date").drum({
onChange : function (elem) {
var arr = {'date' : 'setDate', 'month' : 'setMonth', 'fullYear' : 'setFullYear'};
var date = new Date();
var hidden_input = '';
for (var s in arr) {
console.log(s);
var select = $($(" select[name='" + s + "']")[0]);
var i = select.val()
eval ("date." + arr[s] + "(" + i + ")");
hidden_input = select.data('for');
}
date.setSeconds(0);
updateIDate(date);

var format = date.getFullYear() + '-' + pad( date.getMonth() + 1 ) + '-' + pad( date.getDate() ) ;
$('#' + hidden_input).val(format);
$('.date_header .selection').html(format);
console.log('the date:', format);

}
});
updateIDate(new Date());


/* end Date box plugin */
        }