diff --git a/README.md b/README.md index 251770e..0b8079b 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ This bundle implements the [Bootstrap DateTime Picker](https://github.com/smalot/bootstrap-datetimepicker) in a Form Type for Symfony 2.*. The bundle structure is inspired by GenemuFormBundle. -Demo : http://www.malot.fr/bootstrap-datetimepicker/demo.php +Demo: http://www.malot.fr/bootstrap-datetimepicker/demo.php Please feel free to contribute, to fork, to send merge request and to create ticket. @@ -10,21 +10,10 @@ Please feel free to contribute, to fork, to send merge request and to create tic ### Step 1: Install DatetimepickerBundle -Add the following dependency to your composer.json file: - -``` json -{ - "require": { - - "stephanecollot/datetimepicker-bundle": "dev-master" - } -} -``` - -and then run +Add the bundle to your composer.json file: ```bash -php composer.phar update stephanecollot/datetimepicker-bundle +php composer.phar require stephanecollot/datetimepicker-bundle ``` ### Step 2: Enable the bundle @@ -51,7 +40,29 @@ sc_datetimepicker: ### Step 3: Initialize assets ``` bash -$ php app/console assets:install web/ +php app/console assets:install +``` + +###Step 4: Add CSS an JS to your main template + +Probably somewhere inside .. +``` twig + {% stylesheets + "@SCDatetimepickerBundle/Resources/public/css/datetimepicker.css" + %} + + {% endstylesheets %} +``` + +Probably shortly before ... Change the line referencing the second .js file +for a translation other than German ("de") or remove if your are fine with English. +``` twig + {% javascripts + "@SCDatetimepickerBundle/Resources/public/js/bootstrap-datetimepicker.js" + "@SCDatetimepickerBundle/Resources/public/js/locales/bootstrap-datetimepicker.de.js" + %} + + {% endjavascripts %} ``` ## Usages @@ -92,39 +103,21 @@ public function buildForm(FormBuilder $builder, array $options) } ``` -Add form_javascript and form_stylesheet +Create a new JavaScript file (or add to one of your existing ones): -The principle is to separate the javascript, stylesheet and html. -This allows better integration of web pages. +``` javascript +$(document).ready(function() { + $('*[data-autostart-datetimepicker]').datetimepicker(); +}); +``` -### Example: +Adding that fragment directly in your view templates would also work, but mixing +HTML and JS is not a good idea from an architectural point. -``` twig -{% block stylesheets %} - - - {{ form_stylesheet(form) }} -{% endblock %} - -{% block javascripts %} - - - - {{ form_javascript(form) }} -{% endblock %} - -{% block body %} -
- {{ form_widget(form) }} - - -
-{% endblock %} -``` -## Documentation +## DateTimePicker Documentation -The documentation of the datetime picker is here : http://www.malot.fr/bootstrap-datetimepicker/#options +The documentation of the datetime picker is here: http://www.malot.fr/bootstrap-datetimepicker/#options ## Notes diff --git a/Resources/views/Form/div_layout.html.twig b/Resources/views/Form/div_layout.html.twig index 60477a3..8ecfc01 100644 --- a/Resources/views/Form/div_layout.html.twig +++ b/Resources/views/Form/div_layout.html.twig @@ -1,8 +1,29 @@ - {% block collot_datetime_widget %} {% spaceless %} + + {# Could not find a rule on how "data-" attributs map to datetimepicker options, so we need a full map #} + {% set optionsMap = { + format: 'date-format', + minView: 'min-view', + maxView: 'max-view', + formatter: 'formatter', + weekStart: 'date-weekstart', + autoclose: 'date-autoclose', + startView: 'start-view', + todayHighlight: 'date-today-highlight', + keyboardNavigation: 'date-keyboard-navigation', + forceParse: 'date-force-parse', + pickerPosition: 'picker-position', + language: 'date-language', + } %} + {% if widget == "single_text" %} + {% for key in pickerOptions|keys %} + {% set attr = {('data-'~(optionsMap[key] ? optionsMap[key] : key)): pickerOptions[key]}|merge(attr) %} + {% endfor %} + {% set attr = {'data-autostart-datetimepicker': true}|merge(attr) %} + {{ block("form_widget_simple") }} {% else %}