From 4ef98e9fb2570c9ea9cb8569fae9d1dca8fc652d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oliver=20Brahmst=C3=A4dt?= Date: Tue, 24 Jan 2017 10:33:22 +0000 Subject: [PATCH 1/5] Moving options to data-* attributes to fix #5, #20 Changed div_layout.html.twig to contain all options as data-* attributes in the single_text form field. This allows initialization of datetimepicker without option in JS and you can have several fields in one form. Both form_javascript(form) and form_stylesheet(form) are not needed any more (see README for details) --- README.md | 75 ++++++++++------------- Resources/views/Form/div_layout.html.twig | 22 ++++++- 2 files changed, 55 insertions(+), 42 deletions(-) diff --git a/README.md b/README.md index 251770e..eb858fa 100644 --- a/README.md +++ b/README.md @@ -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,37 +103,19 @@ 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. +''' js +$(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 diff --git a/Resources/views/Form/div_layout.html.twig b/Resources/views/Form/div_layout.html.twig index 60477a3..84b8635 100644 --- a/Resources/views/Form/div_layout.html.twig +++ b/Resources/views/Form/div_layout.html.twig @@ -1,8 +1,28 @@ - {% 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', + } %} + {% 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 %}
From c630e70af38ed2f6798dc5ee993b6f7ae30d5919 Mon Sep 17 00:00:00 2001 From: fogs Date: Tue, 24 Jan 2017 11:05:09 +0000 Subject: [PATCH 2/5] Typo --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index eb858fa..27ae316 100644 --- a/README.md +++ b/README.md @@ -59,7 +59,7 @@ for a translation other than German ("de") or remove if your are fine with Engli ``` twig {% javascripts "@SCDatetimepickerBundle/Resources/public/js/bootstrap-datetimepicker.js" - "@SCDatetimepickerBundle/Resources/public/js//locales/bootstrap-datetimepicker.de.js" + "@SCDatetimepickerBundle/Resources/public/js/locales/bootstrap-datetimepicker.de.js" %} {% endjavascripts %} From 531f0f5662c1d44a7b1dd6b0324fe1576556976a Mon Sep 17 00:00:00 2001 From: fogs Date: Tue, 24 Jan 2017 11:08:16 +0000 Subject: [PATCH 3/5] Typos --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 27ae316..3cd6341 100644 --- a/README.md +++ b/README.md @@ -105,7 +105,7 @@ public function buildForm(FormBuilder $builder, array $options) Create a new JavaScript file (or add to one of your existing ones): -''' js +``` javascript $(document).ready(function() { $('*[data-autostart-datetimepicker]').datetimepicker(); }); @@ -117,7 +117,7 @@ HTML and JS is not a good idea from an architectural point. ## 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 From 92597eced99783fd0623bf2ad6969085e337d10d Mon Sep 17 00:00:00 2001 From: fogs Date: Tue, 24 Jan 2017 11:09:02 +0000 Subject: [PATCH 4/5] Typo --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 3cd6341..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. From 798056bb71794a96ee258cef55f4cb9e42977d96 Mon Sep 17 00:00:00 2001 From: fogs Date: Sat, 5 May 2018 11:59:47 +0200 Subject: [PATCH 5/5] Added mapping for 'language' option --- Resources/views/Form/div_layout.html.twig | 1 + 1 file changed, 1 insertion(+) diff --git a/Resources/views/Form/div_layout.html.twig b/Resources/views/Form/div_layout.html.twig index 84b8635..8ecfc01 100644 --- a/Resources/views/Form/div_layout.html.twig +++ b/Resources/views/Form/div_layout.html.twig @@ -15,6 +15,7 @@ keyboardNavigation: 'date-keyboard-navigation', forceParse: 'date-force-parse', pickerPosition: 'picker-position', + language: 'date-language', } %} {% if widget == "single_text" %}