tessl/npm-flatpickr

A lightweight, powerful javascript datetime picker

1.06x

Overview

Eval results

Files

Dynamic Date Picker Configuration Manager

Name: tessl/npm-flatpickr
Rating: 0.95 (1 reviews)
Author: tessl

A utility that manages a date picker instance with dynamically adjustable configuration based on user preferences and form context.

Capabilities

Initialize date picker with default settings

Creates a date picker instance on a given input element with a default date format of "Y-m-d" @test

Update date format dynamically

Changes the date format from "Y-m-d" to "F j, Y" (e.g., "January 15, 2024") when setDateFormat is called @test
Changes the date format from "Y-m-d" to "m/d/Y" (e.g., "01/15/2024") when setDateFormat is called @test

Toggle calendar features dynamically

Enables week numbers display when toggleWeekNumbers(true) is called @test
Enables time picker when toggleTimePicker(true) is called @test

Apply date range constraints at runtime

Sets a minimum selectable date when setMinDate is called @test
Sets a maximum selectable date when setMaxDate is called @test
Updates both minimum and maximum date constraints when setDateRange is called @test

Implementation

@generates

API

/**
 * Creates and manages a date picker instance with dynamic configuration capabilities.
 *
 * @param {HTMLInputElement} inputElement - The input element to attach the date picker to
 * @returns {Object} A manager object with methods to control the date picker
 */
function createDatePickerManager(inputElement) {
  // Returns an object with the following methods:
  return {
    /**
     * Gets the current date picker instance
     * @returns {Object} The flatpickr instance
     */
    getInstance: function() {},

    /**
     * Updates the date format
     * @param {string} format - The new date format string (e.g., "Y-m-d", "F j, Y", "m/d/Y")
     */
    setDateFormat: function(format) {},

    /**
     * Toggles week numbers display
     * @param {boolean} enabled - Whether to show week numbers
     */
    toggleWeekNumbers: function(enabled) {},

    /**
     * Toggles time picker
     * @param {boolean} enabled - Whether to enable time selection
     */
    toggleTimePicker: function(enabled) {},

    /**
     * Sets minimum selectable date
     * @param {Date|string|null} minDate - The minimum date, or null to remove constraint
     */
    setMinDate: function(minDate) {},

    /**
     * Sets maximum selectable date
     * @param {Date|string|null} maxDate - The maximum date, or null to remove constraint
     */
    setMaxDate: function(maxDate) {},

    /**
     * Sets both minimum and maximum dates
     * @param {Date|string|null} minDate - The minimum date
     * @param {Date|string|null} maxDate - The maximum date
     */
    setDateRange: function(minDate, maxDate) {}
  };
}

module.exports = { createDatePickerManager };

Dependencies { .dependencies }

flatpickr { .dependency }

Provides datetime picker functionality with dynamic configuration support.

@satisfied-by

Install with Tessl CLI

npx tessl i tessl/npm-flatpickr