tessl/npm-flatpickr

A lightweight, powerful javascript datetime picker

1.06x

Overview

Eval results

Files

Dynamic Date Preset Selector

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

Build a date preset selector that allows users to quickly set dates on a date picker through button clicks.

Requirements

Create a web page with a date input field and four preset buttons. When a user clicks a preset button, the date picker should be programmatically updated to the corresponding date:

Today: Current date
Tomorrow: Tomorrow's date
One Week: 7 days from today
One Month: 30 days from today

The date picker should:

Display dates using the format "F j, Y" (e.g., "January 15, 2025")
Update the input field value when a preset button is clicked
Allow the calendar to open when clicking the input field

Test Cases

Clicking the "Today" button sets the date picker to today's date @test
Clicking the "Tomorrow" button sets the date picker to tomorrow's date @test
Clicking the "One Week" button sets the date picker to 7 days from today @test
Clicking the "One Month" button sets the date picker to 30 days from today @test

Implementation

@generates

API

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Date Preset Selector</title>
</head>
<body>
    <input type="text" id="datepicker" placeholder="Select a date">
    <div>
        <button id="preset-today">Today</button>
        <button id="preset-tomorrow">Tomorrow</button>
        <button id="preset-week">One Week</button>
        <button id="preset-month">One Month</button>
    </div>
    <script src="./index.js"></script>
</body>
</html>

Dependencies { .dependencies }

flatpickr { .dependency }

Provides datetime picker functionality with programmatic date setting capabilities.

@satisfied-by

Install with Tessl CLI

npx tessl i tessl/npm-flatpickr