Skip to content

Instantly share code, notes, and snippets.

@nnsnodnb

nnsnodnb/calender.html

Last active August 31, 2015 18:27
Show Gist options
  • Save nnsnodnb/7cea89b2973d5d3fbbc6 to your computer and use it in GitHub Desktop.
Save nnsnodnb/7cea89b2973d5d3fbbc6 to your computer and use it in GitHub Desktop.
Download ZIP
jQueryを使って，<input type="date">に対応していないブラウザにカレンダーをフォームに表示させる
Raw
calender.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- jQueryUI -->
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script>
<!--
カレンダーテーマ remondの部分を変えることでデザイン変更可
http://jqueryui.com/themeroller/
-->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css">
<script type="text/javascript" src="calender.js"></script>
</head>
<body>
<form action="index.html" method="POST">
<input type="text" id="datepicker">
</form>
</body>
</html>
Raw
calender.js
$(function() {
$("#datepicker").datepicker();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment