javascript - Bootstrap Month-Year Picker -

i need add couple of month-year pickers form i'm creating in bootstrap template. have found plugin need, written in older version of jquery , therefore breaks... can't roll previous version break other plugins on page.

what need here: http://techbrij.com/month-range-picker-jquery-ui-datepicker it's simple way enter date range using month/year options. used select periods of employment. can steer me in right direction migrate jquery 2.1.*?

edit 2016-02-08 seems conflict lies bootstrap template. template i'm using adminlte almsaeed studio

this gets rendered after following steps load jquery/jquery-ui

it appears work fine, reconstructed example using following script url's jquery(version 2.1.3) , jqueryui(version 1.11.2). make including both in script tag right before closing </body> tag. original code online article @ http://techbrij.com/month-range-picker-jquery-ui-datepicker.

cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js

cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js

live example: http://codepen.io/larryjoelane/pen/jwevpe

html:

<div style="text-align:center;">  <label for="from">from</label>  <input type="text" id="from" name="from" readonly="readonly" />  <label for="to">to</label>  <input type="text" id="to" name="to" readonly="readonly"  />  <input type="button" id="btnshow" value="show" />  </div> 

css:

.ui-datepicker-calendar {      display: none;     /*use line below instead override existing css*/    /*display:none !important*/  } 

javascript:

$("#from, #to").datepicker({   changemonth: true,   changeyear: true,   showbuttonpanel: true,   dateformat: 'mm yy',   onclose: function(datetext, inst) {     var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();     var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();     $(this).datepicker('setdate', new date(year, month, 1));   },   beforeshow: function(input, inst) {     if ((datestr = $(this).val()).length > 0) {       year = datestr.substring(datestr.length - 4, datestr.length);       month = jquery.inarray(datestr.substring(0, datestr.length - 5), $(this).datepicker('option', 'monthnames'));       $(this).datepicker('option', 'defaultdate', new date(year, month, 1));       $(this).datepicker('setdate', new date(year, month, 1));     }     var other = this.id == "from" ? "#to" : "#from";     var option = this.id == "from" ? "maxdate" : "mindate";     if ((selecteddate = $(other).val()).length > 0) {       year = selecteddate.substring(selecteddate.length - 4, selecteddate.length);       month = jquery.inarray(selecteddate.substring(0, selecteddate.length - 5), $(this).datepicker('option', 'monthnames'));       $(this).datepicker("option", option, new date(year, month, 1));     }   } }); $("#btnshow").click(function() {   if ($("#from").val().length == 0 || $("#to").val().length == 0) {     alert('all fields required');   } else {     alert('selected month range :' + $("#from").val() + ' ' + $("#to").val());   } });