0

I'm using bootstrap material calendar picker by T00rk with bootstrap material design by FezVrasta. I'm trying to extend its functionality like adding a drop down options for months and years (successfully integrated unto the calendar) however I can't bind the changes to month and year (when you pick month and year from the drop down options). Yes the text on month and year changes when you select from the drop down but the changes doesn't reflect unto the current active date input, any ideas, help, clues please?

NOTE: here's the modified calendar picker 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...">
T J
  • 42,762
  • 13
  • 83
  • 138
Juliver Galleto
  • 8,831
  • 27
  • 86
  • 164
  • The modified calendar link is dead... – T J May 12 '16 at 04:31
  • @TJ: thank you for the inform, anyway, I have already solved my issue. – Juliver Galleto May 12 '16 at 06:05
  • Then consider posting the solution, or if you think it's not going to be helpful for others, consider deleting the question rather than leaving it open as unresolved. It'll waste the time of future readers... – T J May 12 '16 at 06:07
  • @TJ: instead of a solution, I have address my issue with a different way to achieve my requirements (I wrote my own calendar date and time picker) – Juliver Galleto May 12 '16 at 06:10

0 Answers0