Content Table
2017-05-13

Semantic Ui 日期插件

Semantic Ui 没有提供日期控件，在网上找到了一个基于它的实现，能够选择年、日期、时间、日期+时间，日期范围等，功能很齐全。

可以使用 npm 安装: npm install --save semantic-ui-calendar，也可以下载 semantic-ui-calendar.7z 直接使用，其外观如下:

使用步骤

  1. 引入 SemanticUi 和 SemanticUi Calendar 的 css 和 js:

    1
    2
    3
    4
    5
    6
    <link href="http://cdn.staticfile.org/semantic-ui/2.2.7/semantic.min.css" rel="stylesheet">
    <link href="calendar.css" rel="stylesheet" >

    <script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
    <script src="http://cdn.staticfile.org/semantic-ui/2.2.7/semantic.min.js"></script>
    <script src="calendar.js" charset="utf-8"></script>

  2. 定义 calendar 的 input:

    1
    2
    3
    4
    5
    6
    <div class="ui calendar" id="example1">
        <div class="ui input left icon">
            <i class="calendar icon"></i>
            <input type="text" placeholder="Date" value="2017-06-01">
        </div>
    </div>

  3. 初始化 calendar:

    1
    $('#example1').calendar({type: 'date'});

自定义

  • 自定义日期格式，默认格式如 June 1, 2017 这样的，很多时候我们可能需要 2017-01-06 这样通用的格式，则需要在初始化的时候提供 formatter 函数:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    $('#example1').calendar({
        type: 'date',
        formatter: { // 自定义日期的格式
            date: function(date, settings) {
                if (!date) return '';

                var year  = date.getFullYear();
                var month = date.getMonth() + 1;
                var day   = date.getDate();

                month = month < 10 ? '0'+month : month;
                day   = day   < 10 ? '0'+day   : day;

                return year + '-' + month + '-' + day;
            }
        }
    });

    当然也能修改源码的 formatter 实现自定义格式，这样就不用在用到的地方都单独的提供 formatter 函数。

  • 自定义语言，默认只提供了英文，如果需要使用中文的话，需要修改源码里的 text 对象:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    text: {
        days: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
        months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
        monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        today: 'Today',
        now: 'Now',
        am: 'AM',
        pm: 'PM'
    }

参考资料

See http://codepen.io/SaadRegal/pen/ZOABQr for example usage.