フォームのinput要素に電話番号・日付・時間・金額など、数字のフォーマットを定義できるスクリプト -Cleave.js
クレジットカード番号・電話番号・日付・時間・金額などを入力するフォームのinput要素に、数字を区切ったり、記号文字を加えたり、入力する数字のフォーマットを簡単に定義できる軽量スクリプトを紹介します。 単体のスクリプトとしてだけでなく、Reactコンポーネント、AngularJSディレクティブでも利用できます。 Cleave.js -GitHub Cleave.jsの特徴 Cleave.jsのデモ Cleave.jsの使い方 Cleave.jsの特徴 Cleave.jsは、フォームのinput要素に入力する数字のフォーマットを簡単に定義できます。 クレジットカード番号のフォーマット 電話番号のフォーマット 日付・時間のフォーマット 数値のフォーマット 区切り文字、プレフィックス、ブロックパターン
日付・時間のピッカーを単独のWebコンポーネントとして利用できる軽量JavaScript -Aeon Date Picker
デスクトップでもスマホでもタブレットでも動作し、フレームワークの有無に関係なく機能する、日付・時間のピッカーを簡単に実装できるわずか5Kbの軽量JavaScriptを紹介します。 依存関係は一切なく、単独のWebコンポーネントとして利用できるので、非常に便利です。日本語環境のフォーマットにも対応しています。 依存関係はなし スタンドアロンの単体で動作する軽量JavaScriptで実装されたWebコンポーネント。 どこにでも使用できる どんなページにもどんなフレームワークにも設置可能。 プログレッシブエンハンスメント コードの読み込みに失敗した場合は、ネイティブのピッカーまたはテキストボックスにフォールバック。 アクセシブル マウス・タッチ・キーボード・スクリーンリーダーで動作し、ネイティブのフォーム要素として動作します。 多言語対応 デフォルトでブラウザのローカル言語と日付形式を使用します
Reactベースのシンプルでタッチフレンドリーな日付ピッカー・「React Nice Dates」
React Nice DatesはReactベースのシンプルでタッチフレンドリーな日付ピッカーです。 タッチデバイスで指でタップしやすいように日付同士は間隔をあけられていたり、上下にドラッグする事で月を手軽に変更できるようになっています。 また、〇〇日から××日まで、といったように日付ピッカーでは必須となった機能もサポート、直感的な操作が可能と、タッチフレンドリーな設計になっています。 他にも特定の曜日だけCSSで色を変えられるようclassを与えたり特定の曜日だけ選べないようにするなどカスタマイズ性も高くなっています。 他言語にも対応してるみたいです。なかなか良いライブラリではないでしょうか。上下ドラッグで月を変えられるのは標準化して欲しいくらいに操作しやすかったです。ライセンスはMIT。 React Nice Dates
Moment.jsライクに使える2KBほどの軽量な日付操作ライブラリ・「Day.js」 - かちびと.net
Day.jsはMoment.jsライクに使える2KBほどの軽量な日付操作ライブラリです。Moment.jsとほぼ同じ使い方で同じように操作する事が出来ます。 他ライブラリにも依存せず、Moment.jsを使っている方なら学習コストもほぼ不要でファイルサイズもかなり軽量になっています。 Moment.jsにあるような痒いところに手が届く機能を削いだ分、軽量化されている、みたいな感じでしょうか。国際化も進んでおり、翻訳者も募集されています。 ざっくり使い方です。今回は用意されているCDNを使います。unpkgの他、cdnjsやjsDelivrにも用意されているみたいです。 <script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script> まずスクリプトを読み込みます。 <script>dayjs().format()</sc
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
何日から何日迄の入力に便利な「date-ranges-selector」:phpspot開発日誌
日付や時間を指定するスライダーUI実装「jquery-time-slider」:phpspot開発日誌