yii2 DateTimePicker简单使用

迷南。 2022-05-16 11:40 205阅读 0赞

yii2 使用DatePicker类 参考：[https://www.cnblogs.com/l-zl/p/7373358.html][https_www.cnblogs.com_l-zl_p_7373358.html]

在使用DatePicker类时发现没有 时分 的设置，所有选择了DateTimePicker类 安装如下

composer.json中添加 ：

"2amigos/yii2-date-time-picker-widget" : "*",

<?php
    use dosamigos\datetimepicker\DateTimePicker;
    ?>
    <?= DateTimePicker::widget([
        'model' => $model,
        'attribute' => 'end_time',
        'language' => 'zh-CN',
        'clientOptions' => [
            'autoclose' => true,
            'format' => 'yyyy-mm-dd hh:ii',
            'todayBtn' => true,
            'pickerPosition' => "bottom-left",
        ]
    ]);?>
    <script>
        $(function () {
            $('.glyphicon-remove').parent().remove();
            $('.date').css('width', '220px');
            var beginTime = '<?=date('Y-m-d H:i', $model->begin_time);?>';
            var endTime = '<?=date('Y-m-d H:i', $model->end_time);?>';
            if(beginTime == '1970-01-01 08:00' || endTime == '1970-01-01 08:00') {
                beginTime = timestampToTime(Date.parse(new Date()) / 1000);
                endTime = timestampToTime(Date.parse(new Date()) / 1000);
            }
            $('#outage-begin_time').val(beginTime);
            $('#outage-end_time').val(endTime);
        });
    
        /**
         * 时间戳转时间
         * @param timestamp 时间戳
         * @returns {string} 时间
         */
        function timestampToTime(timestamp) {
            if(timestamp == 0) {
                return '-';
            }
            var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
            var Y = date.getFullYear() + '-';
            var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
            var D = date.getDate() + ' ';
            var h = date.getHours() + ':';
            var m = date.getMinutes();
            return Y + M + D + h + m ;
        }
    </script>

样式：

![70][]

参考：

[https://packagist.org/packages/2amigos/yii2-date-time-picker-widget][https_packagist.org_packages_2amigos_yii2-date-time-picker-widget]

[https://www.malot.fr/bootstrap-datetimepicker/][https_www.malot.fr_bootstrap-datetimepicker]

[https_www.cnblogs.com_l-zl_p_7373358.html]: https://www.cnblogs.com/l-zl/p/7373358.html
[70]: /images/20220516/e1048ccb67bb4ca2b56b416605d009eb.png
[https_packagist.org_packages_2amigos_yii2-date-time-picker-widget]: https://packagist.org/packages/2amigos/yii2-date-time-picker-widget
[https_www.malot.fr_bootstrap-datetimepicker]: https://www.malot.fr/bootstrap-datetimepicker/