nodep-date-input-polyfill - GitLite

KO | EN

gitlite — search

#llm #c #javascript #anthropic #ios #gpt #git #csharp #gemini #cli

nodep-date-input-polyfill

(★ 95)

Automatically adds datepickers to input[type=date] on IE, macOS Safari, and legacy browsers.

파일 탐색기

ZIP 다운로드

.eslintignore
.eslintrc.json
.gitignore
bower.json
index.html
input.js
LICENSE
locales.js
nodep-date-input-polyfill.dist.js
nodep-date-input-polyfill.js
nodep-date-input-polyfill.scss
package-lock.json
package.json
picker.js
README.md
rollup.config.js

# CDN으로 사용하기

jsDelivr

jsDelivr는 공개 GitHub 리포지토리를 별도 설정 없이 CDN으로 즉시 서빙합니다. 버전과 파일을 고르면 웹페이지에 바로 붙일 수 있는 링크와 예시 코드가 만들어집니다.

버전

파일

링크

예시

명령어 용어집

이 문서에서 사용된 명령어를 모아봤습니다. 낯선 명령어가 있다면 펼쳐서 확인해보세요.

🔍

`bower`

설명 보기 ▼

front-end 웹 개발에 최적화된 패키지 관리자. 패키지는 GitHub 사용자/reop 요약, Git의 엔드포인트, URL 혹은 등록된 패키지일 수 있습니다.
더 많은 정보: <https://bower.io/#getting-started>.

bower install

bower.json에 나열된 프로젝트의 종속성 설치:

bower install {{package1 package2 ...}}

bower_components 디렉토리에 하나 이상의 패키지 설치:

bower uninstall {{package1 package2 ...}}

bower_components 디렉토리에서 로컬로 패키지 제거:

🔍

`npm install`

설명 보기 ▼

Install Node packages.

npm {{[i|install]}}

Install dependencies listed in `package.json`:

npm {{[i|install]}} {{package_name}}@{{version}}

Download a specific version of a package and add it to the list of dependencies in `package.json`:

npm {{[i|install]}} {{package_name}} {{[-D|--save-dev]}}

Download the latest version of a package and add it to the list of dev dependencies in `package.json`:

🔍

`npm run`

설명 보기 ▼

Run a script.

npm run

List available scripts:

npm run {{script_name}}

Run a script:

npm run {{script_name}} -- {{argument}} {{--option}}

Pass arguments to a script:

🔍

`npm start`

설명 보기 ▼

This command is an alias of `npm run start`.

tldr npm run

View documentation for the original command:

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

Just include this simple script and IE, macOS Safari, and legacy browser versions will support `<input type="date">`, without any dependencies, not even jQuery!

Support dynamically created inputs, so can be used in single page applications.

Forked from [html5-simple-date-input-polyfill](https://www.npmjs.com/package/html5-simple-date-input-polyfill). Continuing as a separate project.

## Demo

[Try it in IE, macOS Safari, and legacy browser versions.](https://brianblakely.github.io/nodep-date-input-polyfill/)

## Install

### NPM

`npm install --save nodep-date-input-polyfill`

Add to your project:

* **Webpack / Rollup / Babel / ES:** `import 'nodep-date-input-polyfill';`

* **Webpack 1 / Browserify:** `require('nodep-date-input-polyfill');`

* **Script Tag:** Copy `nodep-date-input-polyfill.dist.js` from `node_modules` and
include it anywhere in your HTML.

* This package also supports **AMD**.

### Bower

`bower install nodep-date-input-polyfill`

## Features
* **Easily Stylable:** [These are the default styles](https://github.com/brianblakely/nodep-date-input-polyfill/blob/master/nodep-date-input-polyfill.scss),
which you may override with your own.

* **Polyfills `valueAsDate` and `valueAsNumber`:**
[Learn more about these properties.](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#property-valueasdate)
They behave as getters and setters.

* **Keyboard Shortcuts:** `Esc` will hide the datepicker. `Up/Down` will
increment/decrement the date by one day.

* **Localization:** Specify the datepicker's locale by setting the
`lang` attribute of the `<input>` or any of its parent nodes.

`<input type="date" lang="en" />`

`<body lang="en">`

The default locale is `en`.

The rendered date format will automatically adhere to the given locale.

Currently supported locales include:

* English (US / UK)

* Chinese (Simplified / Simplified Informal / Traditional)

* Japanese

* Spanish

* Portuguese

* Hindi

* German

* Dutch

* Danish

* Turkish

* Ukrainian

* French

* Italian

* Polish

* Czech

* Russian

## Usage Notes

* `getAttribute` and `setAttribute` will only reflect the field's text content.

* In order to work with the field's underlying value, you must get/set its
`value`, `valueAsDate`, or `valueAsNumber` properties.

* Per the native implementation, polyfilled date fields will only accept
values in the format `yyyy-MM-dd`.

* If a user dirties a date field by typing into it manually, the browser will no
longer allow the polyfill to populate the field from the datepicker.

The polyfill will not attempt to solve this on its own.
    One potential workaround that you may choose to adopt
    is to prevent typing entirely:
    ```js
    el.addEventListener('keydown', (e)=> e.preventDefault());
    ```

* When submitting an HTML form, the browser will submit the date field's `value`
attribute (i.e. its text content), not the normalized content of the field's
`value` *property*.

If you don't want that, one potential workaround is to change
    the attribute upon form submission:
    ```js
    el.form.addEventListener('submit', (e)=> el.setAttribute('value', el.value));
    ```

## Contributing

### Local Development
Run `npm start` or, for Cloud9 IDE users: `npm run start-c9`

### Build
Run `npm run build`

### Localization
Please submit PRs with new localizations! Open `locales.js` to add more.
File an issue on GitHub if anything is unclear.

## Thanks
Some words of appreciation for those who have submitted tickets, pull requests,
and new localizations.  The library is more robust and helpful to everyone
because of those who choose to help out.