Архивы javascript - Страница 3 из 10

datatables.net: вынос кнопок экспорта в любое место

07.02.2022 Павел Грибов WEB

Задача: задать местоположение кнопок экспорта, назначить им собственный стиль

Решение:

var buttons = new $.fn.dataTable.Buttons(table, {
         buttons: [
        { text:"Excel",extend: 'excel', className: 'excel_export_style',
            init: function(api, node, config) {
             $(node).removeClass('btn btn-secondary')
            }
    },
        { text:"Print",extend: 'print', className: 'print_export_style',
            init: function(api, node, config) {
                $(node).removeClass('btn btn-secondary')            
            }
        }
      ]
    }).container().appendTo($('#export_buttons'));

var buttons = new $.fn.dataTable.Buttons(table, {

buttons: [

{ text:"Excel",extend: 'excel', className: 'excel_export_style',

init: function(api, node, config) {

$(node).removeClass('btn btn-secondary')

}

{ text:"Print",extend: 'print', className: 'print_export_style',

init: function(api, node, config) {

$(node).removeClass('btn btn-secondary')

}

]

}).container().appendTo($('#export_buttons'));

Оставить комментарий datatbles, javascript

Отрисовка календаря на JavaScript

26.01.2022 Павел Грибов WEB

Задача: нарисовать нечто подобное

Решение:

var days_week = [          
          'Жуть',  
          'Понедельник',
          'Вторник',
          'Среда',
          'Четверг',
          'Пятница',
          'Суббота',
          'Воскресенье',
        ];        
      var month_names=[
        "",  
        "Январь",
        "Февраль",
        "Март",
        "Апрель",
        "Май",
        "Июнь",
        "Июль",
        "Август",
        "Сентябрь",
        "Октябрь",
        "Ноябрь",
        "Декабрь"
      ];
    function GetDayWork(year,month,day){
        dayw=new Date(year, month-1, day).getDay();
        if (dayw==0) return 7;
        return dayw;
    };
    function ReturnToBookingPanel(){
      $(".DateTimePickerForBooking").hide();  
      $(".booking-now").show();
    };
    function GetLastNextCal(month,year,next){
        month=month+next;
        if (month==0){month=12;year--;}
        if (month==13){month=1;year++;}
        PaintBookingMonth(month,year);
    };
    function PaintBookingMonth(month,year){       
       cal_html='';
       cal_html=cal_html+'<div class="calendar_row calendar_row-head">';
       cal_html=cal_html+' <div class="calendar_head-date">'+month_names[month]+' <span>'+year+'</span></div>';
       cal_html=cal_html+'       <div class="calendar_row-head-arrows">';
       cal_html=cal_html+'            <div class="arrow arrow-prev" onclick="GetLastNextCal('+month+','+year+',-1)">';
       cal_html=cal_html+'                  <img src="/img/arr_cal_l.svg">';
       cal_html=cal_html+'            </div>';
       cal_html=cal_html+'            <div class="arrow arrow-next"  onclick="GetLastNextCal('+month+','+year+',1)">';
       cal_html=cal_html+'                  <img src="/img/arr_cal_r.svg">';
       cal_html=cal_html+'           </div>';
       cal_html=cal_html+'       </div>';
       cal_html=cal_html+'</div>'; 
       cal_html=cal_html+'<div class="calendar_row calendar_row-weekdays">';
       cal_html=cal_html+'   <div class="item">Пн</div>';
       cal_html=cal_html+'   <div class="item">Вт</div>';
       cal_html=cal_html+'   <div class="item">Ср</div>';
       cal_html=cal_html+'   <div class="item">Чт</div>';
       cal_html=cal_html+'   <div class="item">Пт</div>';
       cal_html=cal_html+'   <div class="item">Сб</div>';
       cal_html=cal_html+'   <div class="item">Вс</div>';
       cal_html=cal_html+'</div>';

       days = new Date(year, month, 0).getDate() 
       console.log("Дней в месяце:",days);
       // рисуем, пока не кончатся дни
       day=1;
       while (day<=days) {
          cal_html=cal_html+'<div class="calendar_row">';  
          for(let dayw = 1; dayw <= 7; dayw++) {            
            if (GetDayWork(year, month, day)==dayw){               
                if (day>days){
                  console.log("- пропуск");  
                  cal_html=cal_html+'<div class="item"></div>';  
                } else {
                  console.log(day);  
                  available="available";
                  selected="";
                  if (month<(new Date().getMonth()+1)) available=""; //если месяц меньше чем текущий
                  if (month==(new Date().getMonth()+1)){
                      if (day<new Date().getDate()) available="";
                      if (day==new Date().getDate()) selected="selected today";
                  };
                  cal_html=cal_html+'<div id="day_'+year+'_'+month+'_'+day+'" onclick="ChangeDataForBooking('+year+','+month+','+day+')" class="item '+available+' '+selected+'" data-date="'+year+'-'+month+'-'+day+'">'+day+'</div>';
                };               
               day++;
            } else {
              console.log("- пропуск");  
              cal_html=cal_html+'<div class="item"></div>';  
            };          
          };  
          cal_html=cal_html+'</div>'; 
       };       
       cal_html=cal_html+'<div class="booking_date-current_date">';
       cal_html=cal_html+'   Пятница <span>21.01.2022 январь</span>';
       cal_html=cal_html+'</div>';
       $(".booking_date-wrapper").html(cal_html);
    };
    function ChangeDataForBooking(year,month,day){
       console.log("!ChangeDataForBooking",year,month,day); 
       if ($('#day_'+year+'_'+month+'_'+day).hasClass("available")){
         $(".item").removeClass("selected");   
         $('#day_'+year+'_'+month+'_'+day).addClass("selected");
       };
        
    };

100

101

102

103

104

105

106

var days_week = [

'Жуть',

'Понедельник',

'Вторник',

'Среда',

'Четверг',

'Пятница',

'Суббота',

'Воскресенье',

];

var month_names=[

"",

"Январь",

"Февраль",

"Март",

"Апрель",

"Май",

"Июнь",

"Июль",

"Август",

"Сентябрь",

"Октябрь",

"Ноябрь",

"Декабрь"

];

function GetDayWork(year,month,day){

dayw=new Date(year, month-1, day).getDay();

if (dayw==0) return 7;

return dayw;

};

function ReturnToBookingPanel(){

$(".DateTimePickerForBooking").hide();

$(".booking-now").show();

};

function GetLastNextCal(month,year,next){

month=month+next;

if (month==0){month=12;year--;}

if (month==13){month=1;year++;}

PaintBookingMonth(month,year);

};

function PaintBookingMonth(month,year){

cal_html='';

cal_html=cal_html+'<div class="calendar_row calendar_row-head">';

cal_html=cal_html+' <div class="calendar_head-date">'+month_names[month]+' <span>'+year+'</span></div>';

cal_html=cal_html+' <div class="calendar_row-head-arrows">';

cal_html=cal_html+' <div class="arrow arrow-prev" onclick="GetLastNextCal('+month+','+year+',-1)">';

cal_html=cal_html+' <img src="/img/arr_cal_l.svg">';

cal_html=cal_html+' </div>';

cal_html=cal_html+' <div class="arrow arrow-next" onclick="GetLastNextCal('+month+','+year+',1)">';

cal_html=cal_html+' <img src="/img/arr_cal_r.svg">';

cal_html=cal_html+' </div>';

cal_html=cal_html+'</div>';

cal_html=cal_html+'<div class="calendar_row calendar_row-weekdays">';

cal_html=cal_html+' <div class="item">Пн</div>';

cal_html=cal_html+' <div class="item">Вт</div>';

cal_html=cal_html+' <div class="item">Ср</div>';

cal_html=cal_html+' <div class="item">Чт</div>';

cal_html=cal_html+' <div class="item">Пт</div>';

cal_html=cal_html+' <div class="item">Сб</div>';

cal_html=cal_html+' <div class="item">Вс</div>';

cal_html=cal_html+'</div>';

days = new Date(year, month, 0).getDate()

console.log("Дней в месяце:",days);

// рисуем, пока не кончатся дни

day=1;

while (day<=days) {

cal_html=cal_html+'<div class="calendar_row">';

for(let dayw = 1; dayw <= 7; dayw++) {

if (GetDayWork(year, month, day)==dayw){

if (day>days){

console.log("- пропуск");

cal_html=cal_html+'<div class="item"></div>';

} else {

console.log(day);

available="available";

selected="";

if (month<(new Date().getMonth()+1)) available=""; //если месяц меньше чем текущий

if (month==(new Date().getMonth()+1)){

if (day<new Date().getDate()) available="";

if (day==new Date().getDate()) selected="selected today";

};

cal_html=cal_html+'<div id="day_'+year+'_'+month+'_'+day+'" onclick="ChangeDataForBooking('+year+','+month+','+day+')" class="item '+available+' '+selected+'" data-date="'+year+'-'+month+'-'+day+'">'+day+'</div>';

};

day++;

} else {

console.log("- пропуск");

cal_html=cal_html+'<div class="item"></div>';

};

cal_html=cal_html+'</div>';

};

cal_html=cal_html+'<div class="booking_date-current_date">';

cal_html=cal_html+' Пятница <span>21.01.2022 январь</span>';

cal_html=cal_html+'</div>';

$(".booking_date-wrapper").html(cal_html);

};

function ChangeDataForBooking(year,month,day){

console.log("!ChangeDataForBooking",year,month,day);

if ($('#day_'+year+'_'+month+'_'+day).hasClass("available")){

$(".item").removeClass("selected");

$('#day_'+year+'_'+month+'_'+day).addClass("selected");

};

Оставить комментарий javascript, календарь

JavaScript: добавить лидирующий 0 к числу

02.08.2021 Павел Грибов WEB

Задача: добавить к числу лидирующий 0, если число однозначное, и не добавлять соответственно, если двухзначное.

Решение: есть два способа, старый, работающий во всех браузерах, и новый — для браузеров 2018 года и новее.

Способ 1:

function pad(value) {
    return ("0"+value).slice(-2);
}

function pad(value) {

return ("0"+value).slice(-2);

}

Способ 2:

function pad(value) {
    return value.tostring().padstart(2, 0);
}

function pad(value) {

return value.tostring().padstart(2, 0);

}

Оставить комментарий javascript, лидирующий 0, лидирующий ноль

Заменить текст строки внутри скобок

21.06.2021 Павел Грибов WEB

Задача: в текущем выделенном элементе списка select заменить текст внутри скобок.

Решение:

Воспользуемся силой регулярки

$('#OutletSelectForCharging option:selected' ).text().replace(/\(.+\)/,'')+"("+current_status_connector_id+")";

1	$('#OutletSelectForCharging option:selected' ).text().replace(/$.+$/,'')+"("+current_status_connector_id+")";

Оставить комментарий javascript, замена, регулярки

Загрузка js и css «по требованию»

25.05.2021 Павел Грибов WEB

Задача: по какому то условию (ну в моем случае это загрузка скрипта «Тура по сайту» если вдруг пользователь его не проходил), необходимо до грузить дополнительные JS и CSS файлы, а по завершению их загрузки — запустить.

Решение:

function TourStart(){
    if ((localStorage.getItem(document.location.pathname+"_tour")==null)||(localStorage.getItem(document.location.pathname+"_tour")==false)){
        element = document.createElement("script");
        element.src = "https://shepherdjs.dev/dist/js/shepherd.js";
        element.addEventListener('load', () => {
            console.log("--загружаем тур!");
            element = document.createElement("script");
            element.src = "/js/tour.min.js";
            document.body.appendChild(element);
        });
        document.body.appendChild(element);
        element = document.createElement("link");
        element.href = "https://shepherdjs.dev/dist/css/shepherd.css";
        element.rel="stylesheet"
        document.body.appendChild(element);        
        
    };
};

console.log("-- main.js загружен");
$(document).ready(function() {
   TourStart(); // стартовать тур по странице если нужно..
});

function TourStart(){

if ((localStorage.getItem(document.location.pathname+"_tour")==null)||(localStorage.getItem(document.location.pathname+"_tour")==false)){

element = document.createElement("script");

element.src = "https://shepherdjs.dev/dist/js/shepherd.js";

element.addEventListener('load', () => {

console.log("--загружаем тур!");

element = document.createElement("script");

element.src = "/js/tour.min.js";

document.body.appendChild(element);

});

document.body.appendChild(element);

element = document.createElement("link");

element.href = "https://shepherdjs.dev/dist/css/shepherd.css";

element.rel="stylesheet"

document.body.appendChild(element);

};

console.log("-- main.js загружен");

$(document).ready(function() {

TourStart(); // стартовать тур по странице если нужно..

});

Оставить комментарий javascript, загрузка

« 1 2 3 4 5 … 10 »

Апрель 2024
Пн	Вт	Ср	Чт	Пт	Сб	Вс
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30