Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
HYEN35 opened this issue Mar 22, 2021 · 2 comments
Open

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

HYEN35 opened this issue Mar 22, 2021 · 2 comments

Comments

@HYEN35
Copy link

HYEN35 commented Mar 22, 2021 •
edited
Loading

** 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
Copy link
Contributor

lja1018 commented Mar 23, 2021

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

@roto1212
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@lja1018 @HYEN35 @roto1212