web-dev-qa-db-ja.com

軽量のJavaScript日付ピッカーはありますか？

私はjQueryの日付ピッカーを使用していますが、重すぎます。ui.datepicker.min.jsの縮小バージョンは44 KBです。日付ピッカーの画像には独自の重みがあります。 jQueryフレームワークは59 KBです。また、ページ上の画像の合計は約80 KBです。ページの合計HTMLは約70 KBで、CSSファイルのサイズは約72 KBです。さらに、すべてが600 KB（0.6 MB）になります。

ユーザーは600 KBがブラウザにダウンロードされるのを待つと思いますか？最大8〜10秒かかる場合があります。そして、ユーザーがそんなに長い間待つとは思いません。

ウェブサイトを軽量に保ちたい。軽量のJavaScript日付ピッカーはありますか？

javascriptdatepicker
50
Zain Shaikh

1つのオプションは、jQueryなどの一般的なスクリプトファイルを提供するために Google Libraries API などの コンテンツ配信ネットワーク （CDN）を使用することです。 CDNの可能性を使用すると、ユーザーは既にスクリプトファイルをブラウザにキャッシュしているので、再度ダウンロードする必要はありません。他の静的リソースについては、静的リソースのロード時間を最適化するために YSlowの推奨事項 を読むことができます（静的リソースのgzip圧縮とキャッシュが可能です） minify 。

2
Darin Dimitrov

Pikaday に出会ったばかりです。これは見た目が良く、非常に軽量です（JSの約11kb、縮小）。 jQueryも必要ありません。

デモ です。

ピッカーのスクリーンショット：

Pikaday Screenshot

Timepickerとmoment.jsでpikadayを使用する例

<link rel="stylesheet" href="/pikaday/css/pikaday.css">
<script src="/pikaday/moment.js"></script>
<script src="/pikaday/pikaday.js"></script>
<script>
var timepicker = new Pikaday({
    field: document.getElementById('datetimepicker'),
    firstDay: 1,
    minDate: new Date(2016, 0, 1),
    maxDate: new Date(2100, 12, 31),
    yearRange: [2016,2100],
    showTime: true,
    autoClose: false,
    use24hour: false,
    format: 'MMM Do YYYY, h:mm a'
});
</script>

github.com/owenmead/Pikaday

momentjs.com

70
Matt

公式jQueryの例でも同じ問題に直面しました（上記のコメントを参照）。問題をCSSテーマに分離し、ジャンクを取り除き始めました。完了する前に、私が必要なことを正確にやった男がいることに気付きました。 http://keith-wood.name/datepickBasics.html

DatePicker.jsおよび単一のCSSファイル。すべては、誰もがキャッシュする必要がある基本的なjQueryファイルに加えて、2つのHTTPリクエストと40 kBを伝えました Darinが言うように 。

6
Glenn

ここのこの日付ピッカーはjqueryを必要とせず、縮小されたファイルは約11kbです： https://github.com/kaore/CibulCalendar

4
kaore

私はジェイソン・ムーンの馬鹿な日付入力カレンダースクリプトを見てきました。重量が少し軽いようです。

ただし、機能セットなどを完全に保証することはできません。

2
LesterDove

UIは主にタッチデバイスを対象としていますが、デスクトップの使用も問題ありません。重量については、縮小してgZipして、許容可能な15kbになります。

Mobiscroll Calendar

1
Levi Kovacs

私はこれが私にとって最もうまくいくことを発見しました： http://keith-wood.name/datepick.html

1
Amit Bhagat