이윰

<label class="label">단일 선택 Datepicker</label>
<label class="input">
    <i class="icon-append fa fa-calendar-o"></i>
    <input type="text" name="date" id="date">
</label>
<script>
$(document).ready(function(){
    $('#date').datepicker({
        dateFormat: 'yy-mm-dd',
        prevText: '◁',
        nextText: '▷',
        showMonthAfterYear: true,
        monthNames: ['년 1월','년 2월','년 3월','년 4월','년 5월','년 6월','년 7월','년 8월','년 9월','년 10월','년 11월','년 12월'],
        monthNamesShort: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
        dayNamesMin: ['일','월','화','수','목','금','토']
    });
});
</script>

<label class="label">기본 Daterangepicker</label>
<label class="input">
    <i class="icon-append far fa-calendar-alt"></i>
    <input type="text" class="daterange-basic" value="2022/01/01 - 2022/01/31">
</label>
<script>
$(function() {
    $('.daterange-basic').daterangepicker({
        locale: {
            format: 'YYYY/MM/DD',
            applyLabel: '확인',
            cancelLabel: '취소',
            daysOfWeek: ['일','월','화','수','목','금','토'],
            monthNames: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월']
        },
        applyClass: 'btn-e btn-e-blue btn-e-lg text-white',
        cancelClass: 'btn-e btn-e-gray btn-e-lg text-white',
    });
});
</script>

<label class="label">기본 여백 Daterangepicker</label>
<label class="input">
    <i class="icon-append far fa-calendar-alt"></i>
    <input type="text" class="daterange-basic-empty" value="">
</label>
<script>
$(function() {
    $('.daterange-basic-empty').daterangepicker({
        autoUpdateInput: false,
        locale: {
            format: 'YYYY/MM/DD',
            applyLabel: '확인',
            cancelLabel: '취소',
            daysOfWeek: ['일','월','화','수','목','금','토'],
            monthNames: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월']
        },
        applyClass: 'btn-e btn-e-blue btn-e-lg text-white',
        cancelClass: 'btn-e btn-e-gray btn-e-lg text-white'
    });
    $('.daterange-basic-empty').on('apply.daterangepicker', function(ev, picker) {
        $(this).val(picker.startDate.format('YYYY/MM/DD') + ' - ' + picker.endDate.format('YYYY/MM/DD'));
    });
    $('.daterange-basic-empty').on('cancel.daterangepicker', function(ev, picker) {
        $(this).val('');
    });
});
</script>

<label class="label">시간 지정 Daterangepicker</label>
<label class="input">
    <i class="icon-append far fa-calendar-alt"></i>
    <input type="text" class="daterange-time" value="2022/01/01 - 2022/01/31">
</label>
<script>
$(function() {
    $('.daterange-time').daterangepicker({
        timePicker: true,
        locale: {
            format: 'YYYY/MM/DD h:mm A',
            applyLabel: '확인',
            cancelLabel: '취소',
            daysOfWeek: ['일','월','화','수','목','금','토'],
            monthNames: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월']
        },
        applyClass: 'btn-e btn-e-blue btn-e-lg text-white',
        cancelClass: 'btn-e btn-e-gray btn-e-lg text-white'
    });
});
</script>

<label class="label">선택형(년,월) Daterangepicker</label>
<label class="input">
    <i class="icon-append far fa-calendar-alt"></i>
    <input type="text" class="daterange-datemenu" value="2022/01/01 - 2022/01/31">
</label>
<script>
$(function() {
    $('.daterange-basic').daterangepicker({
        showDropdowns: true,
        locale: {
            format: 'YYYY/MM/DD',
            applyLabel: '확인',
            cancelLabel: '취소',
            daysOfWeek: ['일','월','화','수','목','금','토'],
            monthNames: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월']
        },
        applyClass: 'btn-e btn-e-blue btn-e-lg text-white',
        cancelClass: 'btn-e btn-e-gray btn-e-lg text-white'
    });
});
</script>

<label class="label">기본 싱글 Daterangepicker</label>
<label class="input">
    <i class="icon-append far fa-calendar-alt"></i>
    <input type="text" class="daterange-single" value="2022/01/01">
</label>
<script>
$(function() {
    $('.daterange-single').daterangepicker({
        singleDatePicker: true,
        locale: {
            format: 'YYYY/MM/DD',
            applyLabel: '확인',
            cancelLabel: '취소',
            daysOfWeek: ['일','월','화','수','목','금','토'],
            monthNames: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월']
        },
        applyClass: 'btn-e btn-e-blue btn-e-lg text-white',
        cancelClass: 'btn-e btn-e-gray btn-e-lg text-white'
    });
});
</script>

<label class="label">싱글 선택형(년,월) Daterangepicker</label>
<label class="input">
    <i class="icon-append far fa-calendar-alt"></i>
    <input type="text" class="daterange-single-datemenu" value="2022/01/01">
</label>
<script>
$(function() {
    $('.daterange-single-datemenu').daterangepicker({
        singleDatePicker: true,
        showDropdowns: true,
        locale: {
            format: 'YYYY/MM/DD',
            applyLabel: '확인',
            cancelLabel: '취소',
            daysOfWeek: ['일','월','화','수','목','금','토'],
            monthNames: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월']
        },
        applyClass: 'btn-e btn-e-blue btn-e-lg text-white',
        cancelClass: 'btn-e btn-e-gray btn-e-lg text-white'
    });
});
</script>

<label class="label">기본 여백 싱글 Daterangepicker</label>
<label class="input">
    <i class="icon-append far fa-calendar-alt"></i>
    <input type="text" class="daterange-single-empty" value="">
</label>
<script>
$(function() {
    $('.daterange-single-empty').daterangepicker({
        singleDatePicker: true,
        autoUpdateInput: false,
        locale: {
            format: 'YYYY/MM/DD',
            applyLabel: '확인',
            cancelLabel: '취소',
            daysOfWeek: ['일','월','화','수','목','금','토'],
            monthNames: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월']
        },
        applyClass: 'btn-e btn-e-blue btn-e-lg text-white',
        cancelClass: 'btn-e btn-e-gray btn-e-lg text-white'
    });
    $('.daterange-single-empty').on('apply.daterangepicker', function(ev, picker) {
        $(this).val(picker.startDate.format('YYYY/MM/DD'));
    });
    $('.daterange-single-empty').on('cancel.daterangepicker', function(ev, picker) {
        $(this).val('');
    });
});
</script>

<label class="label">미리 정의된 기간 Daterangepicker</label>
<div class="clearfix"></div>
<button type="button" class="btn-e btn-e-default btn-e-brd daterange-predefined">
    <i class="far fa-calendar-alt"></i>
    <span></span>
    <b class="caret"></b>
</button>
<script>
$(function() {
    var start = moment().subtract(29, 'days');
    var end = moment();
    function cb(start, end) {
        $('.daterange-predefined span').html(start.format('YYYY/MM/DD') + ' - ' + end.format('YYYY/MM/DD'));
    }
    $('.daterange-predefined').daterangepicker({
        startDate: start,
        endDate: end,
        locale: {
            format: 'YYYY/MM/DD',
            applyLabel: '확인',
            cancelLabel: '취소',
            daysOfWeek: ['일','월','화','수','목','금','토'],
            monthNames: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월']
        },
        ranges: {
            '오늘': [moment(), moment()],
            '어제': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
            '지난 7일': [moment().subtract(6, 'days'), moment()],
            '지난 30일': [moment().subtract(29, 'days'), moment()],
            '이번달': [moment().startOf('month'), moment().endOf('month')],
            '지난달': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
        },
        opens: 'left',
        applyClass: 'btn-e btn-e-blue btn-e-lg text-white',
        cancelClass: 'btn-e btn-e-gray btn-e-lg text-white'
    }, cb);
    cb(start, end);
});
</script>

<label class="label">기본 Slider [<span class="slider-value-color" id="slider_default_value">0</span>]</label>
<div id="slider_default"></div>
<script>
$(document).ready(function(){
    $('#slider_default').slider({
        min: 0,
        max: 1000,
        slide: function(event, ui){
            $('#slider_default_value').text(ui.value);
        }
    });
});
</script>

<label class="label">스탭 Slider [<span class="slider-value-color" id="slider_step_value">1000</span>]</label>
<div id="slider_step"></div>
<script>
$(document).ready(function(){
    $('#slider_step').slider({
        min: 1000,
        max: 3000,
        step: 100,
        slide: function(event, ui){
            $('#slider_step_value').text(ui.value);
        }
    });
});
</script>

<label class="label">기본 tagEditor</label>
<label class="textarea">
    <textarea id="tagEditor_default"></textarea>
</label>
<script>
$(document).ready(function(){
    $('#tagEditor_default').tagEditor({
        initialTags: ['서울', '대전', '대구', '부산'],
        delimiter: ', ',
        placeholder: '태그 입력'
    });
});
</script>

<label class="label">빨강 tagEditor</label>
<label class="textarea tag-red">
    <textarea id="tagEditor_red"></textarea>
</label>
<script>
$(document).ready(function(){
    $('#tagEditor_red').tagEditor({
        initialTags: ['서울', '대전', '대구', '부산'],
        delimiter: ', ',
        placeholder: '태그 입력'
    });
});
</script>

<label class="label">초록 tagEditor</label>
<label class="textarea tag-green">
    <textarea id="tagEditor_green"></textarea>
</label>
<script>
$(document).ready(function(){
    $('#tagEditor_green').tagEditor({
        initialTags: ['서울', '대전', '대구', '부산'],
        delimiter: ', ',
        placeholder: '태그 입력'
    });
});
</script>

<label class="label">노랑 tagEditor</label>
<label class="textarea tag-yellow">
    <textarea id="tagEditor_yellow"></textarea>
</label>
<script>
$(document).ready(function(){
    $('#tagEditor_yellow').tagEditor({
        initialTags: ['서울', '대전', '대구', '부산'],
        delimiter: ', ',
        placeholder: '태그 입력'
    });
});
</script>

<label class="label">검정 tagEditor</label>
<label class="textarea tag-dark">
    <textarea id="tagEditor_dark"></textarea>
</label>
<script>
$(document).ready(function(){
    $('#tagEditor_dark').tagEditor({
        initialTags: ['서울', '대전', '대구', '부산'],
        delimiter: ', ',
        placeholder: '태그 입력'
    });
});
</script>

<label class="label">기본 Spinner</label>
<label class="input">
    <input type="text" class="default_spinner" value="0">
</label>
<script>
$(document).ready(function(){
    $('.default_spinner').asSpinner();
});
</script>

<label class="label">마우스휠 Spinner</label>
<label class="input">
    <input type="text" class="mousewheel_spinner" value="0">
</label>
<script>
$(document).ready(function(){
    $('.mousewheel_spinner').asSpinner({
        mousewheel: true,
        min: -10,
        max: 10
    });
});
</script>

<label class="label">금액 정의된 Spinner (￦1000 ~ ￦30000)</label>
<label class="input">
    <input type="text" class="format_spinner" value="￦1000">
</label>
<script>
$(document).ready(function(){
    $(".format_spinner").asSpinner({
        min: 1000,
        max: 30000,
        step: 1000,
        format: function(value) {
            return '￦'+value;
        },
        parse: function(value) {
            return value.replace('￦','');
        }
    });
});
</script>

<label class="label">월단위 Spinner</label>
<label class="input">
    <input type="text" class="rule_spinner" value="1">
</label>
<script>
$(document).ready(function(){
    $(".rule_spinner").asSpinner({
        rule: 'month'
    });
});
</script>

<div class="text-center">
    <label class="label">Disable display input</label>
    <div class="knob-wrap">
        <input class="knob" data-width="120" data-thickness=.2 data-fgColor="#959595" data-displayInput=false value="35">
    </div>
</div>

<div class="text-center">
    <label class="label">'cursor' mode</label>
    <div class="knob-wrap">
        <input class="knob" data-width="120" data-cursor=true data-fgColor="#3D4254" data-thickness=.2 value="29">
    </div>
</div>

<div class="text-center">
    <label class="label">Display previous value</label>
    <div class="knob-wrap">
        <input class="knob" data-width="120" data-fgColor="#FF5330" data-thickness=.2 data-min="-100" data-displayPrevious=true value="45">
    </div>
</div>

<div class="text-center">
    <label class="label">Angle offset</label>
    <div class="knob-wrap">
        <input class="knob" data-width="120" data-thickness=.2 data-fgColor="#2289FF" data-angleOffset=90 data-linecap=round value="35">
    </div>
</div>

<div class="text-center">
    <label class="label">Angle offset and arc</label>
    <div class="knob-wrap">
        <input class="knob" data-width="120" data-thickness=.2 data-fgColor="#A0CB26" data-angleOffset=-125 data-angleArc=250 data-rotation="anticlockwise" data-linecap=round value="35">
    </div>
</div>

<div class="text-center">
    <label class="label">4-digit, step 1000</label>
    <div class="knob-wrap">
        <input class="knob" data-width="120" data-thickness=.2 data-fgColor="#FFA72C" data-min="-10000" data-displayPrevious=true data-max="10000" data-step="1000" value="0">
    </div>
</div>

<label class="label">기본</label>
<label class="input">
    <input type="text" class="ascolorpicker_default" value="#FF2900">
</label>
<script>
$(document).ready(function(){
    $(".ascolorpicker_default").asColorPicker();
});
</script>

<label class="label">팔레트 asColorPicker</label>
<label class="input">
    <input type="text" class="ascolorpicker_palettes" data-mode="palettes" value="#0078FF">
</label>
<script>
$(document).ready(function(){
    $(".ascolorpicker_palettes").asColorPicker();
});
</script>

<label class="label">복합 asColorPicker</label>
<label class="input">
    <input type="text" class="ascolorpicker_complex" data-mode="complex" value="#87BA00">
</label>
<script>
$(document).ready(function(){
    $(".ascolorpicker_complex").asColorPicker();
});
</script>

<label class="label">그라디언트 asColorPicker</label>
<label class="input">
    <input type="text" class="ascolorpicker_gradient" data-mode="gradient" value="#FF9500">
</label>
<script>
$(document).ready(function(){
    $(".ascolorpicker_gradient").asColorPicker();
});
</script>

<label class="label">그라디언트 asColorPicker (without switchable)</label>
<label class="input">
    <input type="text" class="ascolorpicker_gradient_2" data-mode="gradient" value="#663BB8">
</label>
<script>
$(document).ready(function(){
    $(".ascolorpicker_gradient_2").asColorPicker({
        gradient: {
            switchable: false
        }
    });
});
</script>

<label class="label">그라디언트 asColorPicker (with color value)</label>
<label class="input">
    <input type="text" class="ascolorpicker_gradient_color" data-mode="gradient" value="rgb(120, 84, 71)">
</label>
<script>
$(document).ready(function(){
    $(".ascolorpicker_gradient_color").asColorPicker();
});
</script>