riot实现日历组件标签的编写

最新推荐文章于 2019-09-23 13:53:31 发布

VIP文章 caiwanxia

最新推荐文章于 2019-09-23 13:53:31 发布

阅读量441

点赞数

分类专栏：自定义组件 riot 文章标签： riot 自定义组件

本文链接：https://blog.csdn.net/caiwanxia1/article/details/53026100

版权

app.tag file

<app>

    <div class="container">
        <input type="text" class="field" οnclick="{ open }" value="{ opts.date.date.format(format) }" readonly />

        <div class="calendar calendar--high" if="{ opts.date.isvisible }">

                <button class="calendar__control" disabled="{ opts.date.min.isSame(opts.date.date, 'year') }" οnclick="{ prevYear }">‹</button>
                <div class="calendar__header">{ opts.date.date.format(yearFormat) }</div>
                <button class="calendar__control" disabled="{ opts.date.max.isSame(opts.date.date, 'year') }" οnclick="{ nextYear }">›</button>

                <button class="calendar__control" disabled="{ opts.date.min.isSame(opts.date.date, 'month') }" οnclick="{ prevMonth }">‹</button>
                <div class="calendar__header">{ opts.date.date.format(monthFormat) }</div>
                <button class="calendar__control" disabled="{ opts.date.max.isSame(opts.date.date, 'month') }" οnclick="{ nextMonth }">›</button>


                <div class="calendar__day">Mo</div>
                <div class="calendar__day">Tu</div>
                <div class="calendar__day">We</div>
                <div class="calendar__day">Th</div>
                <div class="calendar__day">Fr</div>
                <div class="calendar__day">Sa</div>
                <div class="calendar__day">Su</div>



            <button class="calendar__date { 'calendar__date--selected': day.selected, 'calendar__date--today': day.today }" disabled="{ day.disabled }" each="{ day in startBuffer }" οnclick="{ select }">{ day.date.format(dayFormat) }</button>
            <button class="calendar__date calendar__date--in-month { 'calendar__date--selected': day.selected, 'calendar__date--today': day.today }" disabled="{ day.disabled }" each="{ day in days }" οnclick="{ select }">{ day.date.format(dayFormat) }</button>
            <button class="cal