Skip to content

Instantly share code, notes, and snippets.

@higaki

higaki/pikadate.html

Last active August 29, 2015 23:38
Show Gist options
  • Save higaki/3794d8659bf18e8b2bdb to your computer and use it in GitHub Desktop.
Save higaki/3794d8659bf18e8b2bdb to your computer and use it in GitHub Desktop.
Download ZIP
Raw
pikadate.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>date picker</title>
<link rel="stylesheet" href="pikaday.css">
<link rel="stylesheet" href="site.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
</head>
<body>
<div class="container" id="pikaday">
<div class="col-sm-1">
<button id="from-yyyy"></button>
<button id="from-mm-dd"></button>
</div>
<div class="col-sm-10">
<button id="clear"></button>
</div>
<div class="col-sm-1">
<button id="to-yyyy"></button>
<button id="to-mm-dd"></button>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="moment.js"></script>
<script src="pikaday.js"></script>
<script src="pikaday.jquery.js"></script>
<script>
$(document).ready(function(){
var setPicker = function(field, date, range, selected) {
var p = new Pikaday({
field: field,
onSelect: selected,
minDate: range[0],
maxDate: range[1],
i18n: {
months: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
weekdays: ['', '', '', '', '', '', ''],
weekdaysShort: ['日', '月', '火', '水', '木', '金', '土'],
},
yearRange: [range[0].getFullYear(), range[1].getFullYear()]
});
p.setDate(date);
return p;
};
var range = [new Date(2012, 0, 1), new Date(2015, 11, 1)];
var from = setPicker($('#from-yyyy')[0], new Date(2015, 5, 17), range, function(date) {
$('#from-yyyy') .text(moment(date).format('YYYY'));
$('#from-mm-dd').text(moment(date).format('MM/DD'));
});
var to = setPicker($('#to-yyyy')[0], new Date(2015, 10, 19), range, function(date) {
$('#to-yyyy') .text(moment(date).format('YYYY'));
$('#to-mm-dd').text(moment(date).format('MM/DD'));
});
$('#clear').click(function(){
from.setDate(new Date(2015, 5, 17));
to .setDate(new Date(2015, 10, 19));
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment