nhn / tui.date-picker

Component that selects specific date.
https://nhn.github.io/tui.date-picker/latest/
MIT License
94 stars 30 forks source link

In mobile, class 'tui-hidden' not deleted. Is there any way you can do it on mobile? #75

Open HYEN35 opened 3 years ago

HYEN35 commented 3 years ago

** Using Version is '4.1.0'

Using Input id-label for, the datepicker was opened when you clicked on the label. It works fine on the web. If you click label, nothing will work. only in the mobile. The class 'tui-hidden' should be deleted from the 'tui-datepicker' like when you click input. The tui-hidden is not deleted on the mobile. Is there any way you can do it on mobile?

test2 test1

*add code

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE html>
<html lang="ko">
<head>
    <title>test</title>
    <meta charset="utf-8">
    <link rel="shortcut icon" type="image/x-icon" href="#none">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=0.1,maximum-scale=1,user-scalable=yes,viewport-fit=cover">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="https://uicdn.toast.com/tui.date-picker/latest/tui-date-picker.css">
    <style>
        .datepicker_bx{color:#a5a5a5;font-size:14px}
        .datepicker_bx:after{display:block;clear:both;content:""}
        .datepicker_bx .txt{float:left;margin:0 5px;line-height:20px}
        .datepicker_bx .today{float:left;margin-right:5px;border:1px solid #d8d8d8;box-sizing:border-box}
        .datepicker{float:left;position:relative}
        .datepicker:after{display:block;clear:both;content:""}
        .datepicker .picker{float:left;width:90px;height:22px;margin-right:5px;padding:0 5px;background-color:transparent;color:#a5a5a5;font-size:14px;text-align:center;border:1px solid #d8d8d8;box-sizing:border-box;cursor:pointer}
        .datepicker .i_picker{float:left;width:22px;height:22px;border:1px solid #d8d8d8;box-sizing:border-box;cursor:pointer}
        .datepicker .i_picker .i{display:block;position:relative;top:3px;width:14px;height:14px;margin:0 auto;background:url(../img/i_calandar.png) center no-repeat;background-size:14px 14px}
        .datepicker .month_popup{position:relative;top:22px}
        .datepicker .tui-datepicker{left:0;z-index:1}
        .datepicker .tui-datepicker .tui-is-selectable.tui-is-selected,
        .datepicker .tui-datepicker.tui-rangepicker .tui-is-selectable.tui-is-selected{background-color:#f37320;color:#fff;border-radius:6px}
        .datepicker .tui-datepicker .tui-is-selectable:hover{border-radius:6px}
        .datepicker .tui-datepicker.tui-rangepicker .tui-is-selected-range{background-color:#f4efe8}
        .datepicker .tui-datepicker .tui-is-selectable:hover{background-color:#f4efe8}
        .datepicker .tui-datepicker-type-date,
        .datepicker .tui-calendar{width:212px}
        .datepicker .tui-calendar .tui-calendar-header-inner{height:30px}
        .datepicker .tui-calendar .tui-calendar-title{font-size:14px}
        .datepicker .tui-calendar td,
        .datepicker .tui-calendar th{height:30px}
        .datepicker .tui-calendar-btn{height:30px}
        .datepicker .tui-calendar-header-info{display:none}
        .datepicker .tui-calendar .tui-calendar-header-inner{padding:0}
        .datepicker .tui-calendar .tui-calendar-title{line-height:30px;vertical-align:middle}
        .datepicker .tui-calendar .tui-calendar-today{color:#999}
    </style>
</head>
<body>
    <div>
        <div class="datepicker_bx">
            <div class="datepicker start">
                <input type="text" id="cal_start_01" class="picker" autocomplete="off" readonly="readonly">
                <label for="cal_start_01" class="i_picker"><i class="i"></i></label>
                <div class="month_popup"></div>
            </div>
            <i class="txt">-</i>
            <div class="datepicker end">
                <input type="text" id="cal_end_01" class="picker" autocomplete="off" readonly="readonly">
                <label for="cal_end_01" class="i_picker"><i class="i"></i></label>
                <div class="month_popup"></div>
            </div>
        </div>
    </div>
 
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://uicdn.toast.com/tui.date-picker/latest/tui-date-picker.js"></script>
    <script>
        $(function(){
            datepicker();
        });
 
        //데이트피커
        function datepicker(){
            var today = new Date();
            var datepicker = new tui.DatePicker.createRangePicker({
                startpicker: {
                    date: today,
                      input: '.start .picker',
                    container: '.start .month_popup'
                },
                endpicker: {
                    date: today,
                      input: '.end .picker',
                    container: '.end .month_popup'
                },
                type: 'date',
                format: 'yyyy-MM-dd',
                language: 'ko'
            });
        };
    </script>
</body>
</html>
cs
lja1018 commented 3 years ago

@HYEN35 Thank you for your report. I'll check and fix it.

roto1212 commented 1 year ago

이거 아직도 안고쳐졌네요... 으 사용불가 컴포넌트ㅠㅠ