Skip to content

Instantly share code, notes, and snippets.

@kurozumi

kurozumi/datepicker.js

Created October 10, 2018 02:53
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kurozumi/bd41294cb08589ea738a5ae43264e6ff to your computer and use it in GitHub Desktop.
Save kurozumi/bd41294cb08589ea738a5ae43264e6ff to your computer and use it in GitHub Desktop.
Download ZIP
Datepickerの日付に数字を追加する
Raw
datepicker.js
<html>
<head>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
var stocks = {"2018\/10\/11":13,"2018\/10\/12":10,"2018\/10\/13":10,"2018\/10\/14":10,"2018\/10\/15":10,"2018\/10\/16":11,"2018\/10\/17":11,"2018\/10\/18":11,"2018\/10\/19":12,"2018\/10\/20":12,"2018\/10\/21":12,"2018\/10\/22":12,"2018\/10\/23":15,"2018\/10\/24":16,"2018\/10\/25":15,"2018\/10\/26":15,"2018\/10\/27":15,"2018\/10\/28":17,"2018\/10\/29":17,"2018\/10\/30":17,"2018\/10\/31":17,"2018\/11\/1":17,"2018\/11\/2":17,"2018\/11\/3":17,"2018\/11\/4":17,"2018\/11\/5":17,"2018\/11\/6":18,"2018\/11\/7":18,"2018\/11\/8":19,"2018\/11\/9":19,"2018\/11\/10":19,"2018\/11\/11":19,"2018\/11\/12":19,"2018\/11\/13":19,"2018\/11\/14":20,"2018\/11\/15":"21","2018\/11\/16":"21","2018\/11\/17":"21","2018\/11\/18":"21","2018\/11\/19":"21","2018\/11\/20":"21","2018\/11\/21":"21","2018\/11\/22":"21","2018\/11\/23":"21","2018\/11\/24":"21","2018\/11\/25":"21","2018\/11\/26":"21","2018\/11\/27":"21","2018\/11\/28":"21","2018\/11\/29":"21","2018\/11\/30":20,"2018\/12\/1":20,"2018\/12\/2":20,"2018\/12\/3":20,"2018\/12\/4":20,"2018\/12\/5":20,"2018\/12\/6":20,"2018\/12\/7":20,"2018\/12\/8":20,"2018\/12\/9":20,"2018\/12\/10":20,"2018\/12\/11":20,"2018\/12\/12":20,"2018\/12\/13":20,"2018\/12\/14":20,"2018\/12\/15":"21","2018\/12\/16":"21","2018\/12\/17":"21","2018\/12\/18":"21","2018\/12\/19":"21","2018\/12\/20":"21","2018\/12\/21":"21","2018\/12\/22":"21","2018\/12\/23":"21","2018\/12\/24":"21","2018\/12\/25":"21","2018\/12\/26":"21","2018\/12\/27":"21","2018\/12\/28":"21","2018\/12\/29":"21","2018\/12\/30":"21","2018\/12\/31":"21","2019\/1\/1":"21","2019\/1\/2":"21","2019\/1\/3":"21","2019\/1\/4":"21","2019\/1\/5":"21","2019\/1\/6":"21","2019\/1\/7":"21","2019\/1\/8":"21","2019\/1\/9":"21","2019\/1\/10":"21","2019\/1\/11":"21","2019\/1\/12":"21","2019\/1\/13":"21","2019\/1\/14":"21","2019\/1\/15":"21","2019\/1\/16":"21","2019\/1\/17":"21","2019\/1\/18":"21","2019\/1\/19":"21","2019\/1\/20":"21","2019\/1\/21":"21","2019\/1\/22":"21","2019\/1\/23":"21","2019\/1\/24":"21","2019\/1\/25":"21","2019\/1\/26":"21","2019\/1\/27":"21","2019\/1\/28":"21","2019\/1\/29":"21","2019\/1\/30":"21","2019\/1\/31":"21","2019\/2\/1":"21","2019\/2\/2":"21","2019\/2\/3":"21","2019\/2\/4":"21","2019\/2\/5":"21","2019\/2\/6":"21","2019\/2\/7":"21","2019\/2\/8":"21","2019\/2\/9":"21","2019\/2\/10":"21","2019\/2\/11":"21","2019\/2\/12":"21","2019\/2\/13":"21","2019\/2\/14":"21","2019\/2\/15":"21","2019\/2\/16":"21","2019\/2\/17":"21","2019\/2\/18":"21","2019\/2\/19":"21","2019\/2\/20":"21","2019\/2\/21":"21","2019\/2\/22":"21","2019\/2\/23":"21","2019\/2\/24":"21","2019\/2\/25":"21","2019\/2\/26":"21","2019\/2\/27":"21","2019\/2\/28":"21","2019\/3\/1":"21","2019\/3\/2":"21","2019\/3\/3":"21","2019\/3\/4":"21","2019\/3\/5":"21","2019\/3\/6":"21","2019\/3\/7":"21","2019\/3\/8":"21","2019\/3\/9":"21","2019\/3\/10":"21"}
$( "#datepicker" ).datepicker({
beforeShowDay: function(day) {
var m = day.getMonth(), d = day.getDate(), y = day.getFullYear();
var format_date = y +'/' + (m+1) +'/'+ d;
var result = false;
var stock = "";
// 在庫有り
$.each(stocks,function(i,v){
if( i == format_date ){
result = true;
stock = v;
}
});
if(result) {
return [true, "", stock.toString()];
}else{
return [false, "", stock.toString()];
}
},
beforeShow: function() {
setTimeout(function() {
$(".ui-datepicker-calendar td").map(function(){
var date = $(this).text();
if(/\d/.test(date)) {
if($(this).attr("title")) {
$(this).find("a").append($("<div />").html("<small>" + $(this).attr("title") + "</small>"));
}
}
});
});
}
});
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment