bl6.jpホームニュースレビューお出かけアプリウェブサイトMacカメラレタッチTips雑記bl6.jpファッション、写真、旅行、ガジェットなどの備忘録menuホームJavaScriptアクセシブルなデートピッカーを実装できる「ad-datepicker」JavaScript2018.08.30アクセシブルなデートピッカーを実装できる「ad-datepicker」ad-datepickerはアクセシブルなデートピッカーを実装できるjQueryプラグインです。オプションもたくさん用意されているので、カスタマイズ性にも優れています。キーボード操作にも対応しているのでキーボードを使ってサクサク操作したい人にはとても使いやすいデートピッカーになるのではないでしょうか?ad-datepickerの実際のデモは以下のページから確認できます。デモデモではDateと書かれた所にボックスが設置されており、ボックス右側のアイコンをクリックするとカレンダーが表示されます。目的の日付をクリックすることでその日付を選択できます。カレンダー内の操作はキーボードからも行うことが可能です。上下左右キーからカーソルを動かすことができ、特定の日付にカーソルを合わせた状態でenterキーもしくはspaceキーを押せばその日付を選択することができます。そのほか、多言語にも対応していたり豊富なオプションが用意されたりとカスタマイズ性の高いデートピッカーに仕上がっています。主なオプション項目は、buttonLabel、buttonTitle、changeMonthButtonLabel、changeRangeButtonLabel、changeYearButtonLabel、closeButtonLabel、closeButtonTitle、datesDisabled、daysOfWeekDisabled、firstDayOfWeek、gainFocusOnConstruction、inline、inputFormat、isDateDisabled、isMonthDisabled、isYearDisabled、max、min、modal、next、nextButtonLabel、nextMonthButtonLabel、nextYearButtonLabel、onUpdate、outputFormat、prevButtonLabel、previous、prevMonthButtonLabel、prevYearButtonLabel、startView、theme、titleFormat、weekDayFormatです。いうわけで、アクセシブルでカスタマイズ性に優れたデートピッカー「ad-datepicker」の紹介でした。ad-datepickerの具体的な使い方やダウンロードは、以下のページからどうぞ。CarouselというjQueryプラグインを使えば、...JavaScript要素を縦長に並べてマウスオーバーで全部表示させるjQueryプラグイン「VerticalShift」...とても面白い見せ方だったのでご紹介します。要素を縦長に並べてマウスオー...JavaScript軽量でミニマルなモーダルボックスを実装できる「Uglipop.js」Uglipop.jsは軽量でミニマル、カスタマイズ性にも優れたモーダル...JavaScriptシンプルで実装も簡単なjQueryアコーディオン「vallenato.js」vallenato.jsは、シンプルで簡単に実装することができるjQu...JavaScript面白いエフェクトのページ内スクロールを実装できるjQueryプラグイン「AnimateScroll」...ページの任意の場所にスクロールできるjQueryプラグイン「Anima...検索:プロフィールbl6.jp心がときめく「モノ」や「コト」を中心に紹介しています。レビューや日記なんかも。TwitterFacebookInstagram最近の記事2020.02.20いつもの音楽をハイレゾ級で。ソニーの完全ワイヤレス...ソニーからハイレゾ級高音質と優れた接続性を備えた小型・軽量の完全ワイヤレスイヤホ...2020.02.19三色ボールペンの青と緑を「黒」に変えるいつも仕事で使っているジェットストリームの三色ボールペン(+シャーペン付き)。こ...2020.02.18成城石井オリジナルコーヒー豆「ブラジルイパネマ」アマゾンで買い物中に見つけた成城石井オリジナルコーヒー豆「ブラジルイパネマ」。...2020.02.17梅しば1年のどこかで無性にカリカリ梅を食べたくなる時期がある。