Интеграция jQuery кода

Question

У меня есть код jQuery, который работает так, как я хочу, но мне сложно интегрировать этот код в другой файл, над которым я работаю. Вот код, который у меня есть:

jsfiddle

Надеюсь, вы будете видеть из приведенной выше ссылке, что я пытаюсь достичь. Мне нужно интегрировать это в нижеследующий код, но до сих пор удавалось только фиксировать заблокированную дату через 3 дня после текущей даты. Я использую тот же HTML, как jsfiddle, поэтому мне нужно просто интегрировать JQuery в следующий код:

function tm_set_datepicker(){ 
    if (!$.datepicker){ 
     return; 
    } 

    var inputIds = $('input').map(function() { 
     return this.id; 
    }).get().join(' '); 

    var update_date_fields = function(input, inst){ 
     var id = $(input).attr("id"), 
      day = $('#' + id + '_day'), 
      month = $('#' + id + '_month'), 
      year = $('#' + id + '_year'); 

     day.val(inst.selectedDay); 
     month.val(inst.selectedMonth + 1); 
     year.val(inst.selectedYear); 
    }; 

    $(".tm-epo-datepicker").each(function(i,el){ 
     var startDate=parseInt($(this).attr('data-start-year')), 
      endDate=parseInt($(this).attr('data-end-year')), 
      format=$(this).attr('data-date-format'), 
      show=$(this).attr('data-date-showon'); 

     $(el).datepicker({ 
      monthNames: tm_epo_js.monthNames, 
      monthNamesShort: tm_epo_js.monthNamesShort, 
      dayNames: tm_epo_js.dayNames, 
      dayNamesShort: tm_epo_js.dayNamesShort, 
      dayNamesMin: tm_epo_js.dayNamesMin, 
      isRTL: tm_epo_js.isRTL, 

      showOn: show, 
      buttonText:"", 
      showButtonPanel: true, 
      changeMonth: true, 
      changeYear: true, 
      dateFormat: format, 
      minDate: 3, 
      maxDate: new Date(endDate, 12 - 1, 31), 
      onSelect: function (dateText, inst) { 
       update_date_fields(this, inst); 
      }, 
      beforeShow: function(input, inst) { 
       $('#ui-datepicker-div').removeClass(inputIds); 
       $('#ui-datepicker-div').addClass(this.id+ ' tm-epo-skin'); 
       $("body").addClass("tm-static"); 
       $(el).prop("readonly",true); 
      }, 
      onClose: function(dateText, inst) { 
       $("body").removeClass("tm-static"); 
       $(el).trigger("change"); 
       $(el).prop("readonly",false); 
      } 
     }).on('change.tmdate', function(e){ 
      var id='#' + $(this).attr("id"), 
       input=$(this), 
       format=input.attr('data-date-format'), 
       date = input.datepicker('getDate'), 
       day='',month='',year='', 
       day_field=$(id + '_day'), 
       month_field=$(id + '_month'), 
       year_field=$(id + '_year'); 

      if (date){ 
       day = date.getDate(); 
       month = date.getMonth() + 1; 
       year = date.getFullYear(); 
      } 
      day_field.val(day); 
      month_field.val(month); 
      year_field.val(year); 

     }); 
    }); 

    $('.tmcp-date-select').on('change.cpf',function(e){ 
     var id='#' + $(this).attr("data-tm-date"), 
      input=$(id), 
      format=input.attr('data-date-format'), 
      day=$(id + '_day').val(), 
      month=$(id + '_month').val(), 
      year=$(id + '_year').val(), 
      dateFormat = $.datepicker.formatDate(format, new Date(year, month-1, day)); 
     if (day>0 && month>0 && year>0){ 
      input.datepicker("setDate", dateFormat); 
      input.trigger("change"); 
     }else{ 
      input.val(""); 
      input.trigger("change.cpf"); 
     }    
    });  

    $(window).on("resizestart",function() {    
     var field = $(document.activeElement); 
     if (field.is('.hasDatepicker')) { 
      field.data("resizestarted",true); 
      if ($(window).width()<768){ 
       field.data("resizewidth",true); 
       return; 
      } 
      field.datepicker('hide');     
     } 
    }); 
    $(window).on("resizestop",function() {    
     var field = $(document.activeElement); 
     if (field.is('.hasDatepicker') && field.data("resizestarted")) { 
      if (field.data("resizewidth")){ 
       field.datepicker('hide'); 
      } 
      field.datepicker('show');     
     } 
     field.data("resizestarted",false); 
     field.data("resizewidth",false); 
    }); 

}; 

Любая помощь будет очень ценится :)

Answer 1

Вы должны вызвать этот код, когда ваш документ загружен, как показано ниже. JSFiddle делает это для вас на лету, но в вашем собственном проекте вам нужно обернуть свой код внутри блока $(document).ready(). Также убедитесь, что вы связались с jQuery в разделе <head>.

$(document).ready(function() {  

function tm_set_datepicker(){ 
    if (!$.datepicker){ 
     return; 
    } 

    var inputIds = $('input').map(function() { 
     return this.id; 
    }).get().join(' '); 

    var update_date_fields = function(input, inst){ 
     var id = $(input).attr("id"), 
      day = $('#' + id + '_day'), 
      month = $('#' + id + '_month'), 
      year = $('#' + id + '_year'); 

     day.val(inst.selectedDay); 
     month.val(inst.selectedMonth + 1); 
     year.val(inst.selectedYear); 
    }; 

    $(".tm-epo-datepicker").each(function(i,el){ 
     var startDate=parseInt($(this).attr('data-start-year')), 
      endDate=parseInt($(this).attr('data-end-year')), 
      format=$(this).attr('data-date-format'), 
      show=$(this).attr('data-date-showon'); 

     $(el).datepicker({ 
      monthNames: tm_epo_js.monthNames, 
      monthNamesShort: tm_epo_js.monthNamesShort, 
      dayNames: tm_epo_js.dayNames, 
      dayNamesShort: tm_epo_js.dayNamesShort, 
      dayNamesMin: tm_epo_js.dayNamesMin, 
      isRTL: tm_epo_js.isRTL, 

      showOn: show, 
      buttonText:"", 
      showButtonPanel: true, 
      changeMonth: true, 
      changeYear: true, 
      dateFormat: format, 
      minDate: 3, 
      maxDate: new Date(endDate, 12 - 1, 31), 
      onSelect: function (dateText, inst) { 
       update_date_fields(this, inst); 
      }, 
      beforeShow: function(input, inst) { 
       $('#ui-datepicker-div').removeClass(inputIds); 
       $('#ui-datepicker-div').addClass(this.id+ ' tm-epo-skin'); 
       $("body").addClass("tm-static"); 
       $(el).prop("readonly",true); 
      }, 
      onClose: function(dateText, inst) { 
       $("body").removeClass("tm-static"); 
       $(el).trigger("change"); 
       $(el).prop("readonly",false); 
      } 
     }).on('change.tmdate', function(e){ 
      var id='#' + $(this).attr("id"), 
       input=$(this), 
       format=input.attr('data-date-format'), 
       date = input.datepicker('getDate'), 
       day='',month='',year='', 
       day_field=$(id + '_day'), 
       month_field=$(id + '_month'), 
       year_field=$(id + '_year'); 

      if (date){ 
       day = date.getDate(); 
       month = date.getMonth() + 1; 
       year = date.getFullYear(); 
      } 
      day_field.val(day); 
      month_field.val(month); 
      year_field.val(year); 

     }); 
    }); 

    $('.tmcp-date-select').on('change.cpf',function(e){ 
     var id='#' + $(this).attr("data-tm-date"), 
      input=$(id), 
      format=input.attr('data-date-format'), 
      day=$(id + '_day').val(), 
      month=$(id + '_month').val(), 
      year=$(id + '_year').val(), 
      dateFormat = $.datepicker.formatDate(format, new Date(year, month-1, day)); 
     if (day>0 && month>0 && year>0){ 
      input.datepicker("setDate", dateFormat); 
      input.trigger("change"); 
     }else{ 
      input.val(""); 
      input.trigger("change.cpf"); 
     }    
    });  

    $(window).on("resizestart",function() {    
     var field = $(document.activeElement); 
     if (field.is('.hasDatepicker')) { 
      field.data("resizestarted",true); 
      if ($(window).width()<768){ 
       field.data("resizewidth",true); 
       return; 
      } 
      field.datepicker('hide');     
     } 
    }); 
    $(window).on("resizestop",function() {    
     var field = $(document.activeElement); 
     if (field.is('.hasDatepicker') && field.data("resizestarted")) { 
      if (field.data("resizewidth")){ 
       field.datepicker('hide'); 
      } 
      field.datepicker('show');     
     } 
     field.data("resizestarted",false); 
     field.data("resizewidth",false); 
    }); 

}; 
});