PHPackages                             wow/codeable-datepicker-widget - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. wow/codeable-datepicker-widget

ActiveWordpress-plugin[Utility & Helpers](/categories/utility)

wow/codeable-datepicker-widget
==============================

Adds a "Date Field" widget that utilizes jQuery UI Datepicker.

06PHP

Since Sep 16Pushed 9y ago1 watchersCompare

[ Source](https://github.com/SnakeO/codeable-date-field)[ Packagist](https://packagist.org/packages/wow/codeable-datepicker-widget)[ RSS](/packages/wow-codeable-datepicker-widget/feed)WikiDiscussions master Synced 2d ago

READMEChangelogDependenciesVersions (1)Used By (0)

Codeable Date Field Plugin
==========================

[](#codeable-date-field-plugin)

Installation
------------

[](#installation)

Copy the plugin into your `wp-content/plugins/` directory, and then login to your WP Admin, go to `Plugins` , find `Codeable Date Field` and click `Activate`

[![Plugin Screen](https://camo.githubusercontent.com/87a2f671d16811339b2d95addf1865ff7139313ab84ffe4ea5bb4e19fb5892c0/68747470733a2f2f776f772d73732e73332e616d617a6f6e6177732e636f6d2f556a71523648322e706e67)](https://camo.githubusercontent.com/87a2f671d16811339b2d95addf1865ff7139313ab84ffe4ea5bb4e19fb5892c0/68747470733a2f2f776f772d73732e73332e616d617a6f6e6177732e636f6d2f556a71523648322e706e67)

If you wish to use `composer` you can add a dependency for our plugin from `WPackagist` at `https://packagist.org/packages/wow/codeable-datepicker-widget`

Usage
-----

[](#usage)

Once activated, visit `Appearance -> Widgets` and you will see a `Codeable - Date Field` widget that you can drag into your various Sidebar and Footer areas. Once added, you'll see a screen with all of the widget options.

[![Widget Added](https://camo.githubusercontent.com/47d0adf146d8040bd2b4cbb308c5b417585215d2c3c7a926caad5a789f55913b/68747470733a2f2f776f772d73732e73332e616d617a6f6e6177732e636f6d2f45776d4b4b55442e706e67)](https://camo.githubusercontent.com/47d0adf146d8040bd2b4cbb308c5b417585215d2c3c7a926caad5a789f55913b/68747470733a2f2f776f772d73732e73332e616d617a6f6e6177732e636f6d2f45776d4b4b55442e706e67)

You are presented first with a dropdown menu titled `Formatting Options...`. The quickest way to get up and running is to select a `Commonly Used Date Format` section inside this dropdown list. This will populate the `date formatter` text field below it with letters which tell the Date Field how the date should appear.

Under the `Build Your Own` section inside the dropdown list, you'll see all of the individual date components. You can select one and it will insert it into the `date formatter` text field as well. Use this to fine-tune your Date Field format.

[![Fine Tune](https://camo.githubusercontent.com/24f98f144fb18597e33556bb4d45cbe13efde9f0e3a519775c45672a700cd0bd/68747470733a2f2f776f772d73732e73332e616d617a6f6e6177732e636f6d2f576e4e7a6578332e706e67)](https://camo.githubusercontent.com/24f98f144fb18597e33556bb4d45cbe13efde9f0e3a519775c45672a700cd0bd/68747470733a2f2f776f772d73732e73332e616d617a6f6e6177732e636f6d2f576e4e7a6578332e706e67)

Below that you will see the *Datepicker Preview* input. Clicking on this input will bring up a Datepicker with the date formatted as you specified in the above section.

[![Datepicker Preview](https://camo.githubusercontent.com/6707241ffad864f6784eae5d236d4dbfa59ef584a2d42eafd2e3b2f642617d5a/68747470733a2f2f776f772d73732e73332e616d617a6f6e6177732e636f6d2f374b30466b6e6e2e706e67)](https://camo.githubusercontent.com/6707241ffad864f6784eae5d236d4dbfa59ef584a2d42eafd2e3b2f642617d5a/68747470733a2f2f776f772d73732e73332e616d617a6f6e6177732e636f6d2f374b30466b6e6e2e706e67)

Finally, the `HTML Attributes` Section allows you to specify the ``'s `name`, `class`, and `id` attributes.

[![HTML Attributes](https://camo.githubusercontent.com/df9e3de11c64c4c9b2b1fe0ed8ecdb06d131ac8abdcce42d80f3369f4d6033d5/68747470733a2f2f776f772d73732e73332e616d617a6f6e6177732e636f6d2f4e6b667768304e2e706e67)](https://camo.githubusercontent.com/df9e3de11c64c4c9b2b1fe0ed8ecdb06d131ac8abdcce42d80f3369f4d6033d5/68747470733a2f2f776f772d73732e73332e616d617a6f6e6177732e636f6d2f4e6b667768304e2e706e67)

Entering `number2` for the `id`, `two` for the `classname`, and `second`, for the `name` will produce this Datepicker Field on your website:

``

###  Health Score

19

—

LowBetter than 9% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity4

Limited adoption so far

Community4

Small or concentrated contributor base

Maturity41

Maturing project, gaining track record

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/134881229?v=4)[jakewow](/maintainers/jakewow)[@Jakewow](https://github.com/Jakewow)

### Embed Badge

![Health badge](/badges/wow-codeable-datepicker-widget/health.svg)

```
[![Health](https://phpackages.com/badges/wow-codeable-datepicker-widget/health.svg)](https://phpackages.com/packages/wow-codeable-datepicker-widget)
```

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)