Bootstrap Html5 fallback

bootstrap-html5-fallback complements mvcct-enhancer Html5 input fallback with bootstrap widgets. Thus, it depends on both the mvcct.enhancer.js, and on the mvcct.enhancer.input.basic.js mvcct-enhancer modules.

It is enough to load the bootstrap.html5.fallback.js, and the selected bootstrap widgets (listed below) in order to enrich mvcct-enhancer html5 fallback with bootstrap modules. More specifically, date-picker, date-time-picker, numeric-range, and color-picker widgets are added as needed to the falled back Html5 inputs. Please, don't forget that Html5 inputs fallback is activated by calling the mvcct.enhancer.addBasicInput method and passing it a Globalize object. This call is automatically added during the scaffolding step of the installation procedure. It is contained in EnhancementFallbackPartial.cshtml: 

<script src="~/lib/smalot-bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
<script src="~/lib/seiyria-bootstrap-slider/dist/bootstrap-slider.min.js"></script>
<script src="~/lib/bootstrap-colorpicker/dist/js/bootstrap-colorpicker.min.js"></script>
<script src="~/lib/mvcct-enhancer/mvcct.enhancer.min.js"></script>
<script src="~/lib/mvcct-enhancer/enhancer-modules/mvcct.enhancer.input.basic.min.js"></script>
<script src="~/lib/bootstrap-html5-fallback/bootstrap.html5.fallback.min.js"></script>
<script type="text/javascript">
        mvcct.enhancer.addBasicInput(Globalize);
</script>

Widget options are added to the overall mvcct-enhancer options object. Please refer to the mvcct-enhancer documentation for the usage of the mvcct-enhancer module. Below, all selected bootstrap widgets, and the loacation where their options are placed. All widgets(as well as mvcct-enhancer) are registered as dependencies, so if you use either nmp, or bower you will have them automatically installed when you install bootstrap-html5-fallback:

  1. Date-picker: smalot-bootstrap-datetimepicker. Options placed in options property: html5FallbackWidgets.date
  2. Time-picker: smalot-bootstrap-datetimepicker. Options placed in options property: html5FallbackWidgets.time
  3. Date-time-picker: smalot-bootstrap-datetimepicker. Options placed in options property: html5FallbackWidgets.datetime
  4. Week-picker: : smalot-bootstrap-datetimepicker. Options placed in options property: html5FallbackWidgets.week
  5. Month-picker: : smalot-bootstrap-datetimepicker. Options placed in options property: html5FallbackWidgets.month
  6. Color-picker: : mjolnic-bootstrap-colorpicker. Options placed in options property: html5FallbackWidgets.color. Important: we added a new option to the colorpicker, namely: makeComponent that when true transforms the input fields into a bootstrap component, so that the selected color is shown to the right of it. As a default this option is false;
  7. Numeric-range : : seiyria-bootstrap-slider. Options placed in options property: html5FallbackWidgets.range.

As for version >= 1.0.2 all above options accept also a function that is passed the node to enhance with the widget (as an Html node NOT a jQuery object) as firts argument, and the original Html5 node as second argument. The function must return a valid option object for the widget. This way, the developer may apply different options to each instance of the same widget.

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 defined in wwwroot/startupjs/startup.js: 

        
    var options = {};
    options.browserSupport = {
        cookie: "_browser_basic_capabilities",
        forms: null,
        fallbacks: {
            number: {
                force: true
            }
            ...
            ...
        },
        handlers: {
            enhance: {
                datetime: null
            }
        }
    };
    mvcct.enhancer.waitAsync(options);

Some options properties, when supported by the widgets are outomatically filled by the fallback module. Namely:

  • date and time formats, are extracted from the options editFormats and processed according to the current locale.
  • initial input value, and min/max/ step properties when supported by the widget are automatically filled with the original Html5 input corresponding property values (converted in the current locale when needed by the widget).
  • the range/slider widget formatter property has been used to localize the numbers shown in labels. However, the developer may override this function.
  • the color-picker format is set to hexadecimal (hex) since this is the format used by native pickers. However, the developer may override this setting.

Fork me on GitHub