WEBデザインの勉強

初心者が1からWEBデザインを勉強するブログ。

jQuery UI Datepicker

f:id:mmmmofu:20170507151810p:plain

jqueryui.com

jqueryui.com

github.com

デモ
http://efu.sakura.ne.jp/web/datepicker/

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>jQuery UI Datepicker</title>
  <link rel="stylesheet" href="http://efu.sakura.ne.jp/web/common/css/reset.css">
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.19/themes/swanky-purse/jquery-ui.css">
  <link rel="stylesheet" href="style.css">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.19/jquery-ui.min.js"></script>
  <script src="datepicker-ja.js"></script>
  <script src="script.js"></script>
</head>
<body>
  <h1>Datepicker</h1>
  <p class="datepicker"><input type="text" id="datepicker"></p>
</body>
</html>
h1 {
  text-align: center;
  font-size: 28px;
  padding: 15px 0;
}
.datepicker {
  width: 100px;
  margin: 0 auto;
}

.datepicker input {
  width: 100px;
  padding: 10px 5px;
  font-size: 18px;
}

*:focus {
  outline: none;
}
$(function(){
  $("#datepicker").datepicker();
});