DatePickers.js

// Using Modernizr to detect and then apply a datepicker to date objects.
// Instead of creating a new instance of a JavaScript class, this is 
// using an object literal.
//
// Usage: DatePickers.initialize(); This would either be called from the
// bottom of your page (after any date pickers) or from inside a jQuery
// document ready clause.
//
// Options:
//   extension: The name of the extension to create/initialize the date
//       picker. Assumes $(selector).datepicker() or similar functionality.
//   extensionOptions: Options, if any, that need to be passed to your
//       date picker extension.
//   selector: Could also use something like ".datepicker" if a class were
//       also being applied to the inputs. By default, assuming the HTML5
//       <input type="date" ... /> tag is being used.
//
(function () {
  window.DatePickers = {
  
    defaults: {
      extension: "datepicker",
      extensionOptions: {},
      selector: "input[type=date]"
    },
  
    initialize: function (options) {
      this.options = $.extend(this.defaults, options);
      this.$el = $(this.options.selector);
      if (this.supportsNativeDate()) {
        console.log("DatePickers: Your browser natively supports date input types.");
      } else {
        console.log("DatePickers: Your browser does not natively support date input types. Applying datepicker extension.");
        this.$el[this.options.extension](this.options.extensionOptions);
      }
      return this;
    },
    
    supportsNativeDate: function () {
      return Modernizr.inputtypes.date;
    }
  };
})();