今日の人気記事

まだデータがありません。

レスポンシブのリッチな日付・時間入力「pickadate.js」

当ページのリンクには広告が含まれています。

スポンサーリンク

レスポンシブデザインのリッチな日付・時間入力を簡単に実現するjQueryプラグイン「pickadate.js」を紹介します。

jQueryプラグイン「pickadate.js」

このプラグインの特徴は「レスポンシブ」「デザインがシンプルでどんなサイトにも合う」「動作が軽快」「アニメーション効果付き」といった点です……至れりつくせりですね。

スポンサーリンク

デモページをご覧ください。

「pickadate.js」のデモ

デモのソース(HTML + jQuery)

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta name="description" content="pickadate.jsのデモでーす。">
<title>pickadate.js - jQueryプラグインまとめのカルマ</title>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/default.css" id="theme_base">
<link rel="stylesheet" href="css/default.date.css" id="theme_date">
<link rel="stylesheet" href="css/default.time.css" id="theme_time">
</head>
<body>  
<section class="section">
  <div class="section__block section__block--scoped">
    <h1>「pickadate.js」のデモのでーす。</h1>
    <fieldset class="fieldset fieldset--demo"><div class="fieldset__wrapper"><input class="fieldset__input js__datepicker" type="text" placeholder="Try me&hellip;"></div></fieldset>
  </div> <!-- .section__block -->
</section> <!-- .section -->

<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<script src="src/picker.js"></script>
<script src="src/picker.date.js"></script>
<script src="src/picker.time.js"></script>
<script src="src/legacy.js"></script>
<script src="src/main.js"></script>
</body>
</html>

pickadate-04
日付だけではなく、時間入力にも対応しているので、要チェックです!

スポンサーリンク

関連記事(一部広告含む)