lvicainne/datetimepicker-bundle

Symfony Bootstrap 日期时间选择器组件包

安装: 350

依赖者: 0

推荐者: 0

安全: 0

星标: 0

关注者: 2

分支: 58

语言:JavaScript

类型:symfony-bundle

1.0.4 2018-10-01 19:53 UTC

This package is auto-updated.

Last update: 2024-08-29 04:09:10 UTC


README

#DatetimepickerBundle

此包实现了 Bootstrap DateTime Picker,适用于 Symfony 2.* 的表单类型。包结构灵感来源于 GenemuFormBundle。

演示: http://www.malot.fr/bootstrap-datetimepicker/demo.php

请随意贡献、分支、发送合并请求和创建工单。

##安装

步骤 1:安装 DatetimepickerBundle

在您的 composer.json 文件中添加以下依赖项

{
    "require": {

        "stephanecollot/datetimepicker-bundle": "dev-master"
    }
}

然后运行

php composer.phar update stephanecollot/datetimepicker-bundle

步骤 2:启用组件包

<?php
// app/AppKernel.php

public function registerBundles()
{
    $bundles = array(
        // ...
        new SC\DatetimepickerBundle\SCDatetimepickerBundle(),
    );
}
# app/config/config.yml
sc_datetimepicker:
    picker: ~

步骤 3:初始化资源

$ php app/console assets:install web/

用法

<?php
// ...
public function buildForm(FormBuilder $builder, array $options)
{
    $builder
        // defaut options
        ->add('createdAt', 'collot_datetime') 
        
        // full options
        ->add('updatedAt', 'collot_datetime', array( 'pickerOptions' =>
            array('format' => 'mm/dd/yyyy',
                'weekStart' => 0,
                'startDate' => date('m/d/Y'), //example
                'endDate' => '01/01/3000', //example
                'daysOfWeekDisabled' => '0,6', //example
                'autoclose' => false,
                'startView' => 'month',
                'minView' => 'hour',
                'maxView' => 'decade',
                'todayBtn' => false,
                'todayHighlight' => false,
                'keyboardNavigation' => true,
                'language' => 'en',
                'forceParse' => true,
                'minuteStep' => 5,
                'pickerReferer ' => 'default', //deprecated
                'pickerPosition' => 'bottom-right',
                'viewSelect' => 'hour',
                'showMeridian' => false,
                'initialDate' => date('m/d/Y', 1577836800), //example
                ))) ; 

}

添加 form_javascript 和 form_stylesheet

原则是将 JavaScript、样式表和 HTML 分离。这有助于更好地集成网页。

示例

{% block stylesheets %}
    <link href="{{ asset('css/bootstrap.min.css') }}" rel="stylesheet" />
    
    {{ form_stylesheet(form) }}
{% endblock %}

{% block javascripts %}
    <script src="{{ asset('js/jquery.min.js') }}"></script>
    <script src="{{ asset('js/bootstrap.min.js') }}"></script>
    
    {{ form_javascript(form) }}
{% endblock %}

{% block body %}
    <form action="{{ path('my_route_form') }}" type="post" {{ form_enctype(form) }}>
        {{ form_widget(form) }}

        <input type="submit" />
    </form>
{% endblock %}

文档

日期时间选择器的文档在这里: http://www.malot.fr/bootstrap-datetimepicker/#options

备注

php 'pickerOptions' => array('format'=>'dd MM yyyy - HH:ii p') 中的日期格式用于自动设置 Symfony 的日期格式,以便与 JavaScript 输出兼容。但存在一些问题,例如, php MM 在 PHP intl 翻译中显示为 "décembre",而在 Bootstrap 翻译中显示为 "Decembre"。这就是为什么我编辑了 js/locales/bootstrap-datetimepicker.fr.js 的原因。