Skip to content

Moving options to data-* attributes to fix #5, #20 #38

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
fogs wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Moving options to data-* attributes to fix #5, #20 #38

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
4ef98e9
Moving options to data-* attributes to fix #5, #20
Jan 24, 2017
c630e70
Typo
fogs Jan 24, 2017
531f0f5
Typos
fogs Jan 24, 2017
92597ec
Typo
fogs Jan 24, 2017
798056b
Added mapping for 'language' option
fogs May 5, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
79 changes: 36 additions & 43 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,29 +2,18 @@

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.

##Installation

### 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
Expand All @@ -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 <head>..</head>
``` twig
{% stylesheets
"@SCDatetimepickerBundle/Resources/public/css/datetimepicker.css"
%}
<link type="text/css" rel="stylesheet" media="screen" href="{{ asset_url }}" />
{% endstylesheets %}
```

Probably shortly before ..</body>. 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"
%}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
```

## Usages
Expand Down Expand Up @@ -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 %}
<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 %}
```

## 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

Expand Down
23 changes: 22 additions & 1 deletion Resources/views/Form/div_layout.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 %}
<div {{ block("widget_container_attributes") }}>
Expand Down