How to use flatpickr - 10 common examples

var language_code = urlParams.locale && urlParams.locale.split('-', 1)[0];
    if (language_code != 'en') {
        // A few language codes are different in GraphHopper and Flatpickr.
        var flatpickr_locale;
        switch (language_code) {
            case 'ca':  // Catalan
                flatpickr_locale = 'cat';
                break;
            case 'el':  // Greek
                flatpickr_locale = 'gr';
                break;
            default:
                flatpickr_locale = language_code;
        }
        if (Flatpickr.l10ns.hasOwnProperty(flatpickr_locale)) {
            Flatpickr.localize(Flatpickr.l10ns[flatpickr_locale]);
        }
    }

    $(window).resize(function () {
        mapLayer.adjustMapSize();
    });
    $("#locationpoints").sortable({
        items: ".pointDiv",
        cursor: "n-resize",
        containment: "parent",
        handle: ".pointFlag",
        update: function (event, ui) {
            var origin_index = $(ui.item[0]).data('index');
            sortable_items = $("#locationpoints > div.pointDiv");
            $(sortable_items).each(function (index) {
                var data_index = $(this).data('index');

this.events.forEach((hook) => {
      // Respect global callbacks registered via setDefault() method
      let globalCallbacks = Flatpickr.defaultConfig[hook] || [];

      // Inject our own method along with user callback
      let localCallback = (...args) => {
        this.$emit(camelToKebab(hook), ...args)
      };

      // Overwrite with merged array
      safeConfig[hook] = arrayify(safeConfig[hook] || []).concat(globalCallbacks, localCallback);
    });

import Vue from 'vue';
  import flatpickr from "flatpickr";
  // Init component
  import flatPickrComponent from '../src/index.js';
  // Need to add base css for flatpickr
  import 'flatpickr/dist/flatpickr.min.css';
  // l10n is optional
  import {Hindi as HindiLocale} from 'flatpickr/dist/l10n/hi.js';
  import {english as EnglishLocale} from 'flatpickr/dist/l10n/default.js'
  // Plugins are optional
  // https://chmln.github.io/flatpickr/plugins/
  import ConfirmDatePlugin from 'flatpickr/dist/plugins/confirmDate/confirmDate.js';
  import 'flatpickr/dist/plugins/confirmDate/confirmDate.css';

  // Override Global settings
  flatpickr.setDefaults({
    disableMobile: true,
    onClose: () => {
      console.log("close event from global config")
    }
  });

  Vue.use(flatPickrComponent);

  export default {
    name: 'app',
    data() {
      return {
        inputDisabled: false,
        form: {
          dateBasic: null,
          dateTime: null,

ngAfterViewInit(): void {
        // add attr data-input, mandatory for the picker to work in wrap mode
        this.renderer.setElementAttribute(this.inputElement.nativeElement, 'data-input', '');

        // disabled case
        if (this.disabled === true) {
            this.model.control.disable()
        }

        const navigatorLanguage = navigator.language.split('-')[0];
        let datePickerLocale = {};
        if (navigatorLanguage === 'fr') {
            datePickerLocale = French.fr;
        }

        // options for the flatpickr instance
        let options = {
            altInput: !this.disabled,
            altFormat: 'd/m/Y', // date format displayed to user
            dateFormat: 'Y-m-d', // date format sent to server
            allowInput: false,
            enableTime: this.enableTime,
            minDate: this.minDate,
            maxDate: this.maxDate,
            clickOpens: !this.disabled,
            wrap: true, // to add input decoration (calendar icon and delete icon)
            locale: datePickerLocale
        }

this.onTriggerEvent(new CustomEvent('keyup'));
                }
                else {
                    this.onTriggerEvent(undefined);
                }
            }
        };
        // add the time picker when format is UTC (Z) or has the 'h' (meaning hours)
        if (outputFormat && (outputFormat === 'Z' || outputFormat.toLowerCase().includes('h'))) {
            pickerOptions.enableTime = true;
        }
        /** @type {?} */
        const placeholder = (this.gridOptions) ? (this.gridOptions.defaultFilterPlaceholder || '') : '';
        /** @type {?} */
        const $filterInputElm = $(`<div class="flatpickr"><input placeholder="${placeholder}" data-input="" class="form-control" type="text"></div>`);
        this.flatInstance = ($filterInputElm[0] &amp;&amp; typeof $filterInputElm[0].flatpickr === 'function') ? $filterInputElm[0].flatpickr(pickerOptions) : Flatpickr($filterInputElm, pickerOptions);
        return $filterInputElm;
    }
    /**

const oldComputations = fpInstance.trackerComputations.splice(0, 42);
            oldComputations.forEach(comp => comp.stop());

            // Set RV to new month (which will trigger autorun to method call for new event counts).
            const date = Moment().month(fpInstance.currentMonth)
                .year(fpInstance.currentYear)
                .startOf('month')
                .valueOf();
            template.dayPickerCurrentMonth.set(date);
          },
        };

        // Only instantiate once.
        if (!template.dayPicker) {
          flatpickrConfig.defaultDate = new Date(defaultDate);
          template.dayPicker = flatpickr('#dayPicker', flatpickrConfig);
        }
        if (!template.startTimeFlatpickr) {
          flatpickrConfig.defaultDate = new Date(defaultDate);
          template.startTimeFlatpickr = flatpickr('#startTime', flatpickrConfig);
        }
        if (!template.endTimeFlatpickr) {
          flatpickrConfig.defaultDate = null;
          template.endTimeFlatpickr = flatpickr('#endTime', flatpickrConfig);
        }
      }
    });
  }

mounted() {
      // Return early if flatPickr is already loaded
      /* istanbul ignore if */
      if (this.fp) return;

      // Backup original handler
      this.oldOnChange = this.config.onChange;
      // Hook our handler
      this.config.onChange = this.onChange;

      // Init flatpickr
      this.fp = new Flatpickr(this.getElem(), this.config);
      // Set initial date
      this.fp.setDate(this.value, true);

    },
    methods: {

componentDidMount() {
    // start new Flatpickr instance
    this.flatpickrInstance = flatpickr(this.flatpickrRef.current, this.getFlatpickrOptions());
  }

};

    // add the time picker when format is UTC (Z) or has the 'h' (meaning hours)
    if (outputFormat && (outputFormat === 'Z' || outputFormat.toLowerCase().includes('h'))) {
      pickerOptions.enableTime = true;
    }

    // merge options with optional user's custom options
    this._flatpickrOptions = { ...pickerOptions, ...userFilterOptions };

    let placeholder = (this.gridOptions) ? (this.gridOptions.defaultFilterPlaceholder || '') : '';
    if (this.columnFilter && this.columnFilter.placeholder) {
      placeholder = this.columnFilter.placeholder;
    }
    const $filterInputElm: any = $(`<div class="flatpickr search-filter filter-${columnId}"><input placeholder="${placeholder}" data-input="" class="form-control" type="text"></div>`);
    this.flatInstance = ($filterInputElm[0] &amp;&amp; typeof $filterInputElm[0].flatpickr === 'function') ? $filterInputElm[0].flatpickr(this._flatpickrOptions) : Flatpickr($filterInputElm, this._flatpickrOptions as unknown as Partial);
    return $filterInputElm;
  }