jQuery pickadate 테마를 변경하는 방법

Question

안녕하세요 저는 pickadate.js이라는 jQuery 플러그인을 사용하고 있습니다. 그러나 나는 주제를 바꾸는 방법을 얻을 수 없다. 테마에는 기본 및 고전 두 가지가 있습니다. 나는 그것을 고전으로 바꾸고 싶다. 당신은 당신이 원하는 테마 테마 CSS를 포함

Answer 1

...하여 플러그인 홈 페이지가 .. this pages source 확인과 같이 테마 선택기를 원하는 경우 Docs are here

...

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> 

자바 스크립트 :

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 파일을 수정하지 않고

(로 버전 업그레이드 중요하다), 나는이에 CSS 클래스를 제거/추가, 자바 스크립트를 사용하여 below-

다음

@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"; 
} 

같은 다른 CSS의 namespacings 각을 warpped 본문에 따라 내 화면 크기 -

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"); 
} 

참고 : window.resize에서도 JS 기능을 호출해야합니다.