|
1 | 1 | # Bootstrap Htmg fallback
|
2 | 2 | A Twitter Bootstrap based Html5 input fallback. It adds Bootstrap widgets to the
|
3 | 3 | [mvcct-enhancer](https://github.com/MvcControlsToolkit/mvcct-enhancer) basic Html5 input fallback module.
|
4 |
| -Thus it depends on both the mvcct.enhancer.js, and mvcct.enhancer.input.basic.js [mvcct-enhancer](https://github.com/MvcControlsToolkit/mvcct-enhancer) modules. |
| 4 | +Thus it depends on both the `mvcct.enhancer.js `, and `mvcct.enhancer.input.basic.js` [mvcct-enhancer](https://github.com/MvcControlsToolkit/mvcct-enhancer) modules. |
5 | 5 | It is enough to load the bootstrap.html5.fallback.js, and the selected bootstrap widgets (listed below) to enrich mvcct-enhancer html5 fallback with botsstrap modules.
|
6 | 6 | More specifically, date-picker, date-time-picker, numeric-range, and color-picker
|
7 |
| -widgets are added as needed to the falled back Html5 inputs. |
| 7 | +widgets are added as needed to the falled back Html5 inputs. Please, don't forget that Html5 inputs fallback is activated |
| 8 | +bya calling the `mvcct.enhancer.addBasicInput` method and passing it a [Globalize](https://github.com/jquery/globalize) object. |
8 | 9 |
|
9 | 10 | Widget options are added to the overall mvcct-enhancer options object.
|
10 | 11 | Please refer to the [mvcct-enhancer](https://github.com/MvcControlsToolkit/mvcct-enhancer)
|
11 | 12 | for the usage of the mvcct-enhancer module. Below, all selected bootstrap widgets, and the loacation theyr options are placed.
|
12 | 13 | All widgets(as well as mvcct-enhancer) are registered as dependencies, so if you use either nmp, or bower you will them have
|
13 |
| -automatically installed when you install bootstrap-html5-fallback: |
| 14 | +automatically installed when you install `bootstrap-html5-fallback`: |
14 | 15 |
|
15 | 16 | 1. Date-picker: [smalot-bootstrap-datetimepicker](https://github.com/smalot/bootstrap-datetimepicker). Options placed in options property: `html5FallbackWidgets.date`
|
16 | 17 | 2. Time-picker: [smalot-bootstrap-datetimepicker](https://github.com/smalot/bootstrap-datetimepicker). Options placed in options property: `html5FallbackWidgets.time`
|
17 | 18 | 3. Date-time-picker: [smalot-bootstrap-datetimepicker](https://github.com/smalot/bootstrap-datetimepicker). Options placed in options property: `html5FallbackWidgets.datetime`
|
18 |
| -4. Color-picker: [mjolnic-bootstrap-colorpicker](https://github.com/mjolnic/bootstrap-colorpicker).Options placed in options property: `html5FallbackWidgets.color` |
19 |
| -5. Numeric-range [seiyria-bootstrap-slider](https://github.com/seiyria/bootstrap-slider).Options placed in options property: `html5FallbackWidgets.range` |
| 19 | +4. Week-picker: [smalot-bootstrap-datetimepicker](https://github.com/smalot/bootstrap-datetimepicker). Options placed in options property: `html5FallbackWidgets.week` |
| 20 | +5. Month-picker: [smalot-bootstrap-datetimepicker](https://github.com/smalot/bootstrap-datetimepicker). Options placed in options property: `html5FallbackWidgets.month` |
| 21 | +6. Color-picker: [mjolnic-bootstrap-colorpicker](https://github.com/mjolnic/bootstrap-colorpicker).Options placed in options property: `html5FallbackWidgets.color`. |
| 22 | +**Important**, we added a new option to the colorpicker, namely: `makeComponent` that when `true` transforms the input fields into a bootstrap component, |
| 23 | + so that the selected color is shown to the right of it. As a default this option is `false`; |
| 24 | +7. Numeric-range [seiyria-bootstrap-slider](https://github.com/seiyria/bootstrap-slider).Options placed in options property: `html5FallbackWidgets.range` |
| 25 | + |
| 26 | +The enhancemet of a falled back Html5 input with one of the above widget may be prevented by setting to `null` its associated `enhance` property in the `mvcct-enhancer` options object: |
| 27 | + |
| 28 | +``` |
| 29 | +var options = {}; |
| 30 | + options.browserSupport = { |
| 31 | + cookie: "_browser_basic_capabilities", |
| 32 | + forms: null, |
| 33 | + fallbacks: { |
| 34 | + number: { |
| 35 | + force: true |
| 36 | + } |
| 37 | + ... |
| 38 | + ... |
| 39 | + }, |
| 40 | + handlers: { |
| 41 | + enhance: { |
| 42 | + datetime: null |
| 43 | + } |
| 44 | + } |
| 45 | + }; |
| 46 | +
|
| 47 | + mvcct.enhancer.waitAsync(options); |
| 48 | +``` |
| 49 | + |
| 50 | +For more information about the `mvcct-enhancer` options object please refer to [mvcct-enhancer documentation](https://github.com/MvcControlsToolkit/mvcct-enhancer). |
| 51 | + |
| 52 | +**Important**, when using this module please avoid specifying two different formats for dates end datetimes in the mvcc-enhancer .editFormats |
| 53 | +options property since date/time pickers just support one format, so the usage of the second format might create problems |
| 54 | +with these widgets. |
20 | 55 |
|
21 | 56 | Some options property, when supported by the widgets are outomatically
|
22 | 57 | filled by the fallback module. Namely:
|
23 |
| -* date and time formats, if possible, are extracted from the options `editFormats` and from the current locale. |
| 58 | +* date and time formats, are extracted from the options `editFormats` and from the current locale. |
24 | 59 | * initial input value, and min/max/ step property when supported by the widget are automatically filled
|
25 | 60 | with the original Html5 input corresponding property values.
|
26 |
| -(converted in the current locale when needed by the widget). |
| 61 | +(converted in the current locale when needed by the widget). |
| 62 | +* the range/slider widget formatter property has been used to localize the numbers shown in labels. |
| 63 | +However, the developer may override this function. |
| 64 | +* the color-picker format is set to hexadecimal (hex) since this is the format used by native pickers. |
| 65 | +However, the developer may override this setting. |
0 commit comments