Как изменить тему jQuery pickadate

Question

Привет Я использую плагин jQuery под названием pickadate.js. Но я не могу понять, как изменить тему. Существует две темы по умолчанию и классика. Я хочу изменить его на классический.

Answer 1

Вы просто включить тему CSS для темы вы хотите ... Docs are here

Если вы хотите сборщик темы, как показали плагина домашней страницы .. проверьте this pages source ...

HTML:

<span class="menu__link"> 
    Themes: 
    <input class="theme-toggle__input" type="radio" id="show_theme_default" name="show_theme" value="default" checked hidden> 
    <label class="theme-toggle__label" for="show_theme_default">default</label> and 
    <input class="theme-toggle__input" type="radio" id="show_theme_classic" name="show_theme" value="classic" hidden> 
    <label class="theme-toggle__label" for="show_theme_classic" class="checked-negative">classic</label> 
</span> 

JavaScript:

var themeSelected = window.localStorage ? localStorage.getItem('theme') : '', 
    $themeLinks = $('#theme_base, #theme_date, #theme_time'), 
    updateStylingLinks = function(value) { 
     value = value || 'default' 
     $('#show_theme_' + value).attr('checked', true) 
     $themeLinks.detach() 
     $themeLinks.each(function() { 
      this.href = this.href.replace(/(.+\/)(\w+)(.+)/, '$1' + value + '$3') 
     }) 
     $themeLinks.appendTo('head') 
    } 

if (themeSelected) { 
    updateStylingLinks(themeSelected) 
} 

$('[name=show_theme]').on('change', function() { 
    var value = this.value 
    updateStylingLinks(value) 
    if (window.localStorage) { 
     localStorage.setItem('theme', value) 
    } 
}) 

Answer 2

Темы

Все темы создаются с учетом LESS и скомпилированы в папку lib/themes .

• Требуется только одна базовая таблица стилей. Выберите тему, затем включите соответствующие сборщики.

Answer 3

Моя цель состояла в том, чтобы использовать обе темы в зависимости от того, если пользователь был на мобильный (тема по умолчанию) или на рабочем столе (классическая тема).

без изменения их .less файлов (с очень важен для обновления версии), я warpped каждый их в различных CSS namespacings как

цен ниже

@import "../bower_components/pickadate/lib/themes-source/_variables.less"; 
@import "../bower_components/pickadate/lib/themes-source/base.less"; 
@import "../bower_components/pickadate/lib/themes-source/base.date.less"; 

body.pickadate--default { 
    @import "../bower_components/pickadate/lib/themes-source/default.less"; 
    @import "../bower_components/pickadate/lib/themes-source/default.date.less"; 
} 
body.pickadate--classic { 
    @import "../bower_components/pickadate/lib/themes-source/classic.less"; 
    @import "../bower_components/pickadate/lib/themes-source/classic.date.less"; 
} 

Затем с помощью JavaScript, добавить/удалить классы CSS к тело в зависимости от моего размера экрана-

var isDesktop = Modernizr.mq('(min-width: 768px)'); //Modernizr media queries 

if (isDesktop) { 
    $("body").addClass("pickadate--classic"); 
    $("body").removeClass("pickadate--default"); 
} else { 
    $("body").addClass("pickadate--default"); 
    $("body").removeClass("pickadate--classic"); 
} 

ПРИМЕЧАНИЕ: Обязательно позвоните в свою функцию JS на window.resize.