我正在使用T00rk 的引导材料日历选择器和 FezVrasta的引导材料设计。我正在尝试扩展其功能,例如添加月份和年份的下拉选项(成功集成到日历中)但是我无法将更改绑定到月份和年份(当您从下拉选项中选择月份和年份时) . 是的,当您从下拉列表中选择时,月份和年份的文本会发生变化,但这些变化不会反映当前的活动日期输入,请提供任何想法、帮助和线索?
注意:这是修改后的日历选择器 js
$(document).ready(function() {
$(".thehide").hide();
//initialize the material design
$.material.init();
$.material.ripples();
$('.datepicker').bootstrapMaterialDatePicker({
weekStart: 0,
time: false,
format: 'MMMM DD, YYYY'
});
});
.padding_15px {
padding: 15px;
}
.shadow-z-1 {
box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 1px 6px 0 rgba(0, 0, 0, 0.12);
}
.d_dp {
position: absolute;
z-index: 999999999;
}
.d_dp,
.d_dp {
list-style: none;
}
.d_dp a {
display: block;
padding: 4px 0px;
font-size: 13px;
color: #555555;
text-decoration: none;
}
.bg_white {
background-color: #ffffff;
}
.radius_3px {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.thehide {
display: none;
}
<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- bootstrap 3 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<!-- material design for bootstrap -->
<link type="text/css" rel="stylesheet" href="http://fezvrasta.github.io/bootstrap-material-design/dist/css/bootstrap-material-design.css">
<link type="text/css" rel="stylesheet" href="http://fezvrasta.github.io/bootstrap-material-design/dist/css/ripples.min.css">
<!-- google icons and roboto -->
<link href='http://fonts.googleapis.com/css?family=Roboto:400,500' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- momentjs -->
<script type="text/javascript" src="http://momentjs.com/downloads/moment-with-locales.min.js"></script>
<!-- material design scripts -->
<script type="text/javascript" src="http://fezvrasta.github.io/bootstrap-material-design/dist/js/material.js"></script>
<script type="text/javascript" src="http://fezvrasta.github.io/bootstrap-material-design/dist/js/ripples.min.js"></script>
<!-- material datepicker -->
<link rel="stylesheet" type="text/css" href="http://t00rk.github.io/bootstrap-material-datetimepicker/css/bootstrap-material-datetimepicker.css">
<!-- datepicker script -->
<script type="text/javascript" src="https://microfinanceconsult.com/datepicker.js"></script>
<input type="text" class="datepicker form-control" placeholder="Click to select time...">