How to use the flatpickr.l10ns function in flatpickr

To help you get started, we’ve selected a few flatpickr examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github carbon-design-system / carbon / packages / components / src / components / date-picker / date-picker.js View on Github external
// `this.options` create-component mix-in creates prototype chain
// so that `options` given in constructor argument wins over the one defined in static `options` property
// 'Flatpickr' wants flat structure of object instead

function flattenOptions(options) {
  const o = {};
  // eslint-disable-next-line guard-for-in, no-restricted-syntax
  for (const key in options) {
    o[key] = options[key];
  }
  return o;
}

// Weekdays shorthand for english locale
Flatpickr.l10ns.en.weekdays.shorthand.forEach((day, index) => {
  const currentDay = Flatpickr.l10ns.en.weekdays.shorthand;
  if (currentDay[index] === 'Thu' || currentDay[index] === 'Th') {
    currentDay[index] = 'Th';
  } else {
    currentDay[index] = currentDay[index].charAt(0);
  }
});

const toArray = arrayLike => Array.prototype.slice.call(arrayLike);

/**
 * @param {number} monthNumber The month number.
 * @param {boolean} shorthand `true` to use shorthand month.
 * @param {Locale} locale The Flatpickr locale data.
 * @returns {string} The month string.
 */
github carbon-design-system / carbon-custom-elements / tests / spec / date-picker_spec.ts View on Github external
it('Should instantiate Flatpickr', async function() {
      const { calendar } = datePicker!;
      expect(calendar).toBeTruthy();
      const { config, loadedPlugins } = datePicker!.calendar!;
      expect(pick(config, ['allowInput', 'appendTo', 'dateFormat', 'locale', 'maxDate', 'minDate', 'positionElement'])).toEqual({
        allowInput: true,
        appendTo: datePicker!.shadowRoot!.getElementById('floating-menu-container')!,
        dateFormat: 'm/d/Y',
        locale: flatpickr.l10ns.default,
        maxDate: undefined,
        minDate: undefined,
        positionElement: datePickerInputStart!.input,
      });
      expect(loadedPlugins.sort()).toEqual([
        'carbonFlatpickrAppendToPlugin',
        'carbonFlatpickrCSSClassPlugin',
        'carbonFlatpickrFixEventsPlugin',
        'carbonFlatpickrFocusPlugin',
        'carbonFlatpickrIconPlugin',
        'carbonFlatpickrMonthSelectPlugin',
        'carbonFlatpickrShadowDOMEventsPlugin',
        'carbonFlatpickrStateHandshakePlugin',
        'range',
      ]);
    });
github TrestleAdmin / trestle / frontend / js / core / i18n.js View on Github external
export function localize () {
  for (var i = 0; i < arguments.length; ++i) {
    var locale = arguments[i]
    var flatpickrLocale = FlatpickrLocaleConversions[locale] || locale

    if (flatpickr.l10ns[flatpickrLocale]) {
      flatpickr.localize(flatpickr.l10ns[flatpickrLocale])
      break
    }
  }
}
github carbon-design-system / carbon-custom-elements / src / components / date-picker / date-picker.ts View on Github external
}

  /**
   * The CSS class applied to the "today" highlight if there are any dates selected.
   */
  static classNoBorder = 'no-border';

  /**
   * The default date format.
   */
  static defaultDateFormat = 'm/d/Y';

  /**
   * The default localization data.
   */
  static defaultLocale = flatpickr.l10ns.default;

  /**
   * A selector that will return the `<input>` to enter starting date.
   */
  static get selectorInputFrom() {
    return `${prefix}-date-picker-input[kind="single"],${prefix}-date-picker-input[kind="from"]`;
  }

  /**
   * A selector that will return the `<input>` to enter end date.
   */
  static get selectorInputTo() {
    return `${prefix}-date-picker-input[kind="to"]`;
  }

  /**
github Enalean / tuleap / src / themes / tlp / src / vendor-overrides / flatpickr.ts View on Github external
* (at your option) any later version.
 *
 * Tuleap is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with Tuleap. If not, see .
 */

import flatpickr from "flatpickr";

flatpickr.defaultConfig.prevArrow = "<i class="fa fa-angle-left"></i>";
flatpickr.defaultConfig.nextArrow = "<i class="fa fa-angle-right"></i>";
flatpickr.l10ns.default.firstDayOfWeek = 1;

export function datePicker(
    element: HTMLInputElement,
    options?: flatpickr.Options.Options
): flatpickr.Instance {
    if (isNaN(Date.parse(element.value))) {
        element.value = "";
    }
    options = options || {};

    options.weekNumbers = true;
    options.dateFormat = "Y-m-d";
    options.time_24hr = true;
    options.monthSelectorType = "static";

    let placeholder = "yyyy-mm-dd";
github carbon-design-system / carbon / packages / components / src / components / date-picker / date-picker.js View on Github external
Flatpickr.l10ns.en.weekdays.shorthand.forEach((day, index) => {
  const currentDay = Flatpickr.l10ns.en.weekdays.shorthand;
  if (currentDay[index] === 'Thu' || currentDay[index] === 'Th') {
    currentDay[index] = 'Th';
  } else {
    currentDay[index] = currentDay[index].charAt(0);
  }
});
github htmlburger / carbon-fields / assets / js / fields / components / datetime / index.js View on Github external
withProps(({ field, handleReady, handleManualInput, formatManualInput, handleChange, handleClose }) => {
		const buttonText = field.type === TYPE_TIME
			? carbonFieldsL10n.field.selectTime
			: carbonFieldsL10n.field.selectDate;

		let locale = 'default';
		if (!isUndefined(FlatpickrJS.l10ns[locale])) {
			locale = carbonFieldsL10n.shortLocale;
		}

		const options = {
			locale,
			...field.picker_options,
			wrap: true,
			onReady: handleReady,
			onChange: handleChange,
			onClose: handleClose,
		};

		return {
			options,
			buttonText,
			handleManualInput,