{"id":2158,"date":"2012-08-14T11:41:23","date_gmt":"2012-08-14T02:41:23","guid":{"rendered":"http:\/\/www.ka-net.org\/blog\/?p=2158"},"modified":"2012-09-20T10:10:28","modified_gmt":"2012-09-20T01:10:28","slug":"jquery-ui%e3%81%aedatepicker%e3%81%ab%e7%a5%9d%e6%97%a5%e5%88%a4%e5%ae%9a%e3%83%ad%e3%82%b8%e3%83%83%e3%82%af%e3%82%92%e7%b5%84%e3%81%bf%e8%be%bc%e3%82%80%e3%80%82","status":"publish","type":"post","link":"https:\/\/www.ka-net.org\/blog\/?p=2158","title":{"rendered":"jQuery UI\u306eDatepicker\u306b\u795d\u65e5\u5224\u5b9a\u30ed\u30b8\u30c3\u30af\u3092\u7d44\u307f\u8fbc\u3080\u3002"},"content":{"rendered":"

jQuery UI\u306b\u306fWeb\u30b7\u30b9\u30c6\u30e0\u3067\u7c21\u5358\u306b\u65e5\u4ed8\u9078\u629e\u304c\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u308b\u300cDatepicker<\/a>\u300d\u304c\u7528\u610f\u3055\u308c\u3066\u3044\u307e\u3059\u304c\u3001\u6a19\u6e96\u3067\u306f\u65e5\u672c\u306e\u795d\u65e5\u306e\u8272\u5206\u3051\u304c\u884c\u3048\u307e\u305b\u3093\u3002
\n\u305d\u3053\u3067\u4eca\u56de\u306f\u3053\u306eDatepicker\u306bExcel MVP\u306e\u89d2\u7530\u3055\u3093<\/a>\u4f5c\u306e\u300c\u65e5\u672c\u306e\u795d\u65e5\u5224\u5b9a\u30ed\u30b8\u30c3\u30af<\/a>\u300d\u3092\u7d44\u307f\u8fbc\u3093\u3067\u307f\u307e\u3059\u3002<\/p>\n

2012\/08\/14 \u8ffd\u8a18\uff1a<\/span>
\n\u4e0b\u8a18\u30b3\u30fc\u30c9\u3092Office\u7528\u30a2\u30d7\u30ea\u306b\u7d44\u307f\u8fbc\u3093\u3060\u306e\u304c\u300c[JavaScript API for Office]\u30ab\u30ec\u30f3\u30c0\u30fc\u304b\u3089\u65e5\u4ed8\u3092\u5165\u529b\u3059\u308b\u30b3\u30f3\u30c6\u30f3\u30c4\u30a2\u30d7\u30ea\u3002<\/a>\u300d\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n


\n\u203b JavaScript \u7528\u795d\u65e5\u5224\u5b9a\u30b3\u30fc\u30c9(HolidayChk.js)\u306f\u89d2\u7530\u3055\u3093\u306eHP<\/a>\u304b\u3089\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3057\u3066\u3001\u81ea\u5206\u306e\u74b0\u5883\u306b\u5408\u308f\u305b\u3066\u6587\u5b57\u30b3\u30fc\u30c9\u3092\u5909\u66f4\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/span>
\n\u203b HolidayChk.js\u3092\u5229\u7528\u3059\u308b\u969b\u306f\u300cAddinBox(\u795d\u65e5\u30de\u30af\u30ed-1)<\/a>\u300d\u306b\u3042\u308b\u4f7f\u7528\u6761\u4ef6\u306b\u5f93\u3063\u3066\u304f\u3060\u3055\u3044\u3002\u307e\u305f\u3001\u30d5\u30a1\u30a4\u30eb\u306f\u5fc5\u305a\u6700\u65b0\u7248\u3092\u4f7f\u7528\u3059\u308b\u3088\u3046\u306b\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/span><\/p>\n

<!DOCTYPE html>\r\n<html>\r\n    <head>\r\n        <meta charset="UTF-8">\r\n        <meta http-equiv="X-UA-Compatible" content="IE=Edge">\r\n        <link rel="stylesheet" href="http:\/\/ajax.googleapis.com\/ajax\/libs\/jqueryui\/1\/themes\/dot-luv\/jquery-ui.css">\r\n        <script src="http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.7.2\/jquery.min.js"><\/script>\r\n        <script src="http:\/\/ajax.googleapis.com\/ajax\/libs\/jqueryui\/1.8.21\/jquery-ui.min.js"><\/script>\r\n        <script src="http:\/\/ajax.googleapis.com\/ajax\/libs\/jqueryui\/1\/i18n\/jquery.ui.datepicker-ja.min.js"><\/script>\r\n        <script src="HolidayChk.js"><\/script>\r\n        <script>\r\n            $(function(){\r\n                $("#datepicker").datepicker({\r\n                    beforeShowDay: function(date) {\r\n                        var result;\r\n                        var dd = date.getFullYear() + "\/" + (date.getMonth() + 1) + "\/" + date.getDate();\r\n                        var hName = ktHolidayName(dd);\r\n                        if(hName != "") {\r\n                            result = [true, "date-holiday", hName];\r\n                        } else {\r\n                            switch (date.getDay()) {\r\n                                case 0: \/\/\u65e5\u66dc\u65e5\r\n                                    result = [true, "date-holiday"];\r\n                                    break;\r\n                                case 6: \/\/\u571f\u66dc\u65e5\r\n                                    result = [true, "date-saturday"];\r\n                                    break;\r\n                                default:\r\n                                    result = [true];\r\n                                    break;\r\n                            }\r\n                        }\r\n                        return result;\r\n                    },\r\n                    onSelect: function(dateText, inst) {\r\n                        alert(dateText);\r\n                    }\r\n                });\r\n            });\r\n        <\/script>\r\n        <style>\r\n            .date-holiday .ui-state-default {\r\n                background-image:none;\r\n                background-color:#FF9999;\r\n            }\r\n            .date-saturday .ui-state-default {\r\n                background-image:none;\r\n                background-color:#66CCFF;\r\n            }\r\n            body {\r\n                margin:0;\r\n                padding:0;\r\n                font-family:Arial,sans-serif;\r\n                font-size:0.8em;\r\n            }\r\n        <\/style>\r\n    <\/head>\r\n    <body>\r\n        <div id="datepicker"><\/div>\r\n    <\/body>\r\n<\/html><\/pre>\n
\"\"<\/a><\/p>\n
\u203b \u5b9f\u969b\u306e\u30b5\u30f3\u30d7\u30eb\u306f\u4e0b\u8a18\u306b\u306a\u308a\u307e\u3059(\u898b\u3084\u3059\u3044\u3088\u3046\u306b\u30b9\u30bf\u30a4\u30eb\u306f\u5909\u66f4\u3057\u3066\u3042\u308a\u307e\u3059)\u3002\u30d6\u30ed\u30b0\u306e\u4ed5\u69d8\u4e0aIE\u3060\u3068\u8868\u793a\u3067\u304d\u306a\u3044\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u3002<\/span><\/p>\n\n\n