{"id":2319,"date":"2015-08-31T09:16:26","date_gmt":"2015-08-31T01:16:26","guid":{"rendered":"http:\/\/blog.hoyo.idv.tw\/?p=2319"},"modified":"2024-10-16T15:48:10","modified_gmt":"2024-10-16T07:48:10","slug":"jquery-%e7%b4%94-%e9%96%8b%e7%99%bc","status":"publish","type":"post","link":"https:\/\/blog.hoyo.idv.tw\/?p=2319","title":{"rendered":"jQuery - DatePicker"},"content":{"rendered":"<p>--<\/p>\n<h2>\u9ede\u5916\u9762(\u96e2\u958b\u7126\u9ede)\u4e0d\u6d88\u5931<\/h2>\n<ul>\n<li><a class=\"question-hyperlink\" href=\"https:\/\/stackoverflow.com\/questions\/13333571\/jquery-ui-datepicker-doesnt-hide-when-click-outside\" target=\"_blank\" rel=\"noopener\">jQuery UI datepicker doesn't hide when click outside<\/a><\/li>\n<\/ul>\n<pre class=\"lang:js decode:true\"> $(\".datepicker\").datepicker({\r\n    showAnim: '',\r\n    changeMonth: true,\r\n    changeYear: true,\r\n});\r\n\r\n$(\".datepicker\").blur(function(e) { $(this).datepicker(\"hide\"); });<\/pre>\n<p>--<\/p>\n<h2>jQuery UI Datepicker \u589e\u52a0\u6642\u9593 Timepicker<\/h2>\n<ul>\n<li><a href=\"http:\/\/yhhuang1966.blogspot.tw\/2013\/04\/jquery-ui-timepicker.html\" target=\"_blank\" rel=\"noopener\">\u5982\u4f55\u5728 jQuery UI \u7684\u65e5\u671f\u9078\u64c7\u5668\u4e0a\u9644\u52a0\u6642\u9593\u9078\u64c7\u5668 timepicker<\/a><\/li>\n<li><a href=\"http:\/\/trentrichardson.com\/examples\/timepicker\/\" target=\"_blank\" rel=\"noopener\">Adding a Timepicker to jQuery UI Datepicker<\/a><\/li>\n<li><a href=\"http:\/\/stackoverflow.com\/questions\/1252512\/jquery-datepicker-prevent-closing-picker-when-clicking-a-date\">jQuery Datepicker: Prevent closing picker when clicking a date<\/a><\/li>\n<\/ul>\n<pre class=\"nums:true lang:default decode:true\">$(function () {\r\n    var opt={\r\n        showButtonPanel: false,\r\n        showAnim: false,\r\n\r\n        \/\/\u4ee5\u4e0b\u70ba\u65e5\u671f\u9078\u64c7\u5668\u90e8\u5206\r\n        dayNames:[\"\u661f\u671f\u65e5\",\"\u661f\u671f\u4e00\",\"\u661f\u671f\u4e8c\",\"\u661f\u671f\u4e09\",\"\u661f\u671f\u56db\",\"\u661f\u671f\u4e94\",\"\u661f\u671f\u516d\"],\r\n        dayNamesMin:[\"\u65e5\",\"\u4e00\",\"\u4e8c\",\"\u4e09\",\"\u56db\",\"\u4e94\",\"\u516d\"],\r\n        monthNames:[\"\u4e00\u6708\",\"\u4e8c\u6708\",\"\u4e09\u6708\",\"\u56db\u6708\",\"\u4e94\u6708\",\"\u516d\u6708\",\"\u4e03\u6708\",\"\u516b\u6708\",\"\u4e5d\u6708\",\"\u5341\u6708\",\"\u5341\u4e00\u6708\",\"\u5341\u4e8c\u6708\"],\r\n        monthNamesShort:[\"\u4e00\u6708\",\"\u4e8c\u6708\",\"\u4e09\u6708\",\"\u56db\u6708\",\"\u4e94\u6708\",\"\u516d\u6708\",\"\u4e03\u6708\",\"\u516b\u6708\",\"\u4e5d\u6708\",\"\u5341\u6708\",\"\u5341\u4e00\u6708\",\"\u5341\u4e8c\u6708\"],\r\n        prevText:\"\u4e0a\u6708\",\r\n        nextText:\"\u6b21\u6708\",\r\n        weekHeader:\"\u9031\",\r\n        showMonthAfterYear:true,\r\n        dateFormat:\"yy-mm-dd\",\r\n        \/\/\u4ee5\u4e0b\u70ba\u6642\u9593\u9078\u64c7\u5668\u90e8\u5206\r\n        timeOnlyTitle:\"\u9078\u64c7\u6642\u5206\",\r\n        timeText:\"\u6642\u9593\",\r\n        hourText:\"\u6642\",\r\n        minuteText:\"\u5206\",\r\n        \/\/secondText:\"\u79d2\",\r\n        \/\/millisecText:\"\u6beb\u79d2\",\r\n        timezoneText:\"\u6642\u5340\",\r\n        currentText:\"\u73fe\u5728\u6642\u9593\",\r\n        closeText:\"\u78ba\u5b9a\",\r\n        amNames:[\"\u4e0a\u5348\",\"AM\",\"A\"],\r\n        pmNames:[\"\u4e0b\u5348\",\"PM\",\"P\"],\r\n        showSecond:false,\r\n        timeFormat:\"HH:mm\" \/\/HH:mm:ss\r\n    };\r\n    $(\".DataTimePicker\").datetimepicker(opt);\r\n});<\/pre>\n<p>--<\/p>\n<p><strong>\u958b\u555f\u986f\u793a\u9031\u6578\u4ee5\u53ca\u5f37\u5236\u9078\u64c7\u7b2c\u4e00\u5929<\/strong><\/p>\n<ul>\n<li><a href=\"http:\/\/stackoverflow.com\/questions\/18482609\/jquery-ui-datepicker-return-first-day-of-selected-week\">jQuery-ui Datepicker return first day of selected week<\/a><\/li>\n<li><a href=\"http:\/\/stackoverflow.com\/questions\/11591854\/format-date-to-mm-dd-yyyy-in-javascript\">Format date to MM\/dd\/yyyy in javascript [duplicate]<\/a><\/li>\n<\/ul>\n<pre class=\"nums:true lang:js decode:true\">var opt={\r\n    showButtonPanel: false,\r\n    showAnim: false,\r\n\r\n    \/\/\u4ee5\u4e0b\u70ba\u65e5\u671f\u9078\u64c7\u5668\u90e8\u5206\r\n    dayNames:[\"\u661f\u671f\u65e5\",\"\u661f\u671f\u4e00\",\"\u661f\u671f\u4e8c\",\"\u661f\u671f\u4e09\",\"\u661f\u671f\u56db\",\"\u661f\u671f\u4e94\",\"\u661f\u671f\u516d\"],\r\n    dayNamesMin:[\"\u65e5\",\"\u4e00\",\"\u4e8c\",\"\u4e09\",\"\u56db\",\"\u4e94\",\"\u516d\"],\r\n    monthNames:[\"\u4e00\u6708\",\"\u4e8c\u6708\",\"\u4e09\u6708\",\"\u56db\u6708\",\"\u4e94\u6708\",\"\u516d\u6708\",\"\u4e03\u6708\",\"\u516b\u6708\",\"\u4e5d\u6708\",\"\u5341\u6708\",\"\u5341\u4e00\u6708\",\"\u5341\u4e8c\u6708\"],\r\n    monthNamesShort:[\"\u4e00\u6708\",\"\u4e8c\u6708\",\"\u4e09\u6708\",\"\u56db\u6708\",\"\u4e94\u6708\",\"\u516d\u6708\",\"\u4e03\u6708\",\"\u516b\u6708\",\"\u4e5d\u6708\",\"\u5341\u6708\",\"\u5341\u4e00\u6708\",\"\u5341\u4e8c\u6708\"],\r\n    prevText:\"\u4e0a\u6708\",\r\n    nextText:\"\u6b21\u6708\",\r\n    weekHeader:\"\u9031\",\r\n    showWeek: true,\r\n    firstDay: 1,\r\n    onSelect: function(date){\r\n        var d = new Date(date);\r\n        var index = d.getDay();\r\n        if(index == 0) {\r\n            d.setDate(d.getDate() - 6);\r\n        }\r\n        else if(index == 1) {\r\n            d.setDate(d.getDate());\r\n        }\r\n        else if(index != 1 &amp;&amp; index &gt; 0) {\r\n            d.setDate(d.getDate() - (index - 1));\r\n        }\r\n        var year = d.getFullYear();\r\n        var month = (1 + d.getMonth()).toString();\r\n        month = month.length &gt; 1 ? month : '0' + month;\r\n        var day = d.getDate().toString();\r\n        day = day.length &gt; 1 ? day : '0' + day;\r\n        \r\n        $(this).val(year +'-'+ month +'-'+ day);\r\n    },\r\n    showMonthAfterYear:true,\r\n    dateFormat:\"yy-mm-dd\"\r\n};\r\n$(\".DataTimePicker\").datepicker(opt);\r\n<\/pre>\n<p>--<\/p>\n<h2><strong>\u53ea\u986f\u793a\u5e74\u3001\u6708<\/strong><\/h2>\n<p>\u5c6c\u65bc\u786c\u5e79\u7684\u65b9\u5f0f\uff0c\u5be6\u969b\u4f7f\u7528\u6548\u679c\u4e0d\u7406\u60f3\uff0c\u5efa\u8b70\u4f7f\u7528\u5176\u4ed6\u65b9\u6848 (2016-03-28)<\/p>\n<ul>\n<li><a href=\"http:\/\/stackoverflow.com\/questions\/24752611\/datepicker-hide-calender-to-show-month-year-and-full-calendar-not-working-proper\">Datepicker hide calender to show month-year and full calendar not working properly<\/a><\/li>\n<\/ul>\n<p>HTML<\/p>\n<pre class=\"lang:default decode:true\">&lt;style&gt;\r\n    .ui-datepicker-calendar {\r\n        display: none !important;\r\n    }\r\n&lt;\/style&gt;<\/pre>\n<p>JavaScript<\/p>\n<pre class=\"nums:true lang:js decode:true\">$('.date-picker').datepicker( {\r\n    changeMonth: true,\r\n    changeYear: true,\r\n    showButtonPanel: true,\r\n    dateFormat: 'MM yy',\r\n    onClose: function(dateText, inst) { \r\n        $(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));\r\n    }\r\n});<\/pre>\n<p>--<\/p>\n<h2>\u9078\u53d6\u4e00\u9031<\/h2>\n<ul>\n<li><a href=\"https:\/\/fjorgedigital.com\/insights\/blog\/how-can-i-use-a-date-picker-to-select-a-whole-week\/\" target=\"_blank\" rel=\"noopener\">How Can I Use a Date Picker to Select a Whole Week?<\/a><\/li>\n<\/ul>\n<pre class=\"lang:default decode:true\">&lt;!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN\" \"http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd\"&gt;\r\n&lt;html xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\" xml:lang=\"en\" lang=\"en\"&gt;\r\n&lt;head&gt;\r\n    &lt;script src=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.4.1\/jquery.js\"&gt;&lt;\/script&gt;\r\n    &lt;script type=\"text\/javascript\" src=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jqueryui\/1.8.14\/jquery-ui.min.js\"&gt;&lt;\/script&gt;\r\n    &lt;link rel=\"stylesheet\" type=\"text\/css\" media=\"screen\" href=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jqueryui\/1.8.14\/themes\/base\/jquery-ui.css\"&gt;\r\n&lt;script type=\"text\/javascript\"&gt;\r\n$(function() {\r\n    var startDate;\r\n    var endDate;\r\n    \r\n    var selectCurrentWeek = function() {\r\n        window.setTimeout(function () {\r\n            $('.week-picker').find('.ui-datepicker-current-day a').addClass('ui-state-active')\r\n        }, 1);\r\n    }\r\n    \r\n    $('.week-picker').datepicker( {\r\n        showOtherMonths: true,\r\n        selectOtherMonths: true,\r\n        onSelect: function(dateText, inst) { \r\n            var date = $(this).datepicker('getDate');\r\n            startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay());\r\n            endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);\r\n            var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;\r\n            $('#startDate').text($.datepicker.formatDate( dateFormat, startDate, inst.settings ));\r\n            $('#endDate').text($.datepicker.formatDate( dateFormat, endDate, inst.settings ));\r\n            \r\n            selectCurrentWeek();\r\n        },\r\n        beforeShowDay: function(date) {\r\n            var cssClass = '';\r\n            if(date &gt;= startDate &amp;&amp; date &lt;= endDate)\r\n                cssClass = 'ui-datepicker-current-day';\r\n            return [true, cssClass];\r\n        },\r\n        onChangeMonthYear: function(year, month, inst) {\r\n            selectCurrentWeek();\r\n        }\r\n    });\r\n    \r\n    $('.week-picker .ui-datepicker-calendar tr').live('mousemove', function() { $(this).find('td a').addClass('ui-state-hover'); });\r\n    $('.week-picker .ui-datepicker-calendar tr').live('mouseleave', function() { $(this).find('td a').removeClass('ui-state-hover'); });\r\n});\r\n&lt;\/script&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n    &lt;div class=\"week-picker\"&gt;&lt;\/div&gt;\r\n    &lt;br \/&gt;&lt;br \/&gt;\r\n    &lt;label&gt;Week :&lt;\/label&gt; &lt;span id=\"startDate\"&gt;&lt;\/span&gt; - &lt;span id=\"endDate\"&gt;&lt;\/span&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p><a href=\"https:\/\/blog.hoyo.idv.tw\/wp-content\/uploads\/2015\/08\/Image-20200521-095611.png\" data-rel=\"lightbox-image-0\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img loading=\"lazy\" class=\"alignnone size-full wp-image-7008\" src=\"https:\/\/blog.hoyo.idv.tw\/wp-content\/uploads\/2015\/08\/Image-20200521-095611.png\" alt=\"\" width=\"313\" height=\"329\" \/><\/a><\/p>\n<p>--<\/p>\n<h2>\u95dc\u9589\u67d0\u500b\u661f\u671f<\/h2>\n<ul>\n<li><a href=\"https:\/\/forum.jquery.com\/topic\/disable-single-day-of-a-week-in-datepicker\" target=\"_blank\" rel=\"noopener\">Disable single day of a week in datepicker<\/a><\/li>\n<\/ul>\n<pre class=\"lang:default decode:true \">$( \"#datepicker\" ).datepicker({\r\n    beforeShowDay: noMondays\r\n});\r\nfunction noMondays(date){\r\n    if (date.getDay() === 1)  \/* Monday *\/\r\n        return [ false, \"closed\", \"Closed on Monday\" ]\r\n    else\r\n        return [ true, \"\", \"\" ]\r\n}<\/pre>\n<p>--<\/p>\n<div class=\"pvc_clear\"><\/div>\n<p class=\"pvc_stats all \" data-element-id=\"2319\" style=\"\"><i class=\"pvc-stats-icon medium\" aria-hidden=\"true\"><svg aria-hidden=\"true\" focusable=\"false\" data-prefix=\"far\" data-icon=\"chart-bar\" role=\"img\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 512 512\" class=\"svg-inline--fa fa-chart-bar fa-w-16 fa-2x\"><path fill=\"currentColor\" d=\"M396.8 352h22.4c6.4 0 12.8-6.4 12.8-12.8V108.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v230.4c0 6.4 6.4 12.8 12.8 12.8zm-192 0h22.4c6.4 0 12.8-6.4 12.8-12.8V140.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v198.4c0 6.4 6.4 12.8 12.8 12.8zm96 0h22.4c6.4 0 12.8-6.4 12.8-12.8V204.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v134.4c0 6.4 6.4 12.8 12.8 12.8zM496 400H48V80c0-8.84-7.16-16-16-16H16C7.16 64 0 71.16 0 80v336c0 17.67 14.33 32 32 32h464c8.84 0 16-7.16 16-16v-16c0-8.84-7.16-16-16-16zm-387.2-48h22.4c6.4 0 12.8-6.4 12.8-12.8v-70.4c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v70.4c0 6.4 6.4 12.8 12.8 12.8z\" class=\"\"><\/path><\/svg><\/i> &nbsp;1,787&nbsp;total views<\/p>\n<div class=\"pvc_clear\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>-- \u9ede\u5916\u9762(\u96e2\u958b\u7126\u9ede)\u4e0d\u6d88\u5931...<\/p>\n<div class=\"pvc_clear\"><\/div>\n<p class=\"pvc_stats all \" data-element-id=\"2319\" style=\"\"><i class=\"pvc-stats-icon medium\" aria-hidden=\"true\"><svg aria-hidden=\"true\" focusable=\"false\" data-prefix=\"far\" data-icon=\"chart-bar\" role=\"img\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 512 512\" class=\"svg-inline--fa fa-chart-bar fa-w-16 fa-2x\"><path fill=\"currentColor\" d=\"M396.8 352h22.4c6.4 0 12.8-6.4 12.8-12.8V108.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v230.4c0 6.4 6.4 12.8 12.8 12.8zm-192 0h22.4c6.4 0 12.8-6.4 12.8-12.8V140.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v198.4c0 6.4 6.4 12.8 12.8 12.8zm96 0h22.4c6.4 0 12.8-6.4 12.8-12.8V204.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v134.4c0 6.4 6.4 12.8 12.8 12.8zM496 400H48V80c0-8.84-7.16-16-16-16H16C7.16 64 0 71.16 0 80v336c0 17.67 14.33 32 32 32h464c8.84 0 16-7.16 16-16v-16c0-8.84-7.16-16-16-16zm-387.2-48h22.4c6.4 0 12.8-6.4 12.8-12.8v-70.4c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v70.4c0 6.4 6.4 12.8 12.8 12.8z\" class=\"\"><\/path><\/svg><\/i> &nbsp;1,787&nbsp;total views<\/p>\n<div class=\"pvc_clear\"><\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[262],"tags":[],"_links":{"self":[{"href":"https:\/\/blog.hoyo.idv.tw\/index.php?rest_route=\/wp\/v2\/posts\/2319"}],"collection":[{"href":"https:\/\/blog.hoyo.idv.tw\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.hoyo.idv.tw\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.hoyo.idv.tw\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.hoyo.idv.tw\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2319"}],"version-history":[{"count":31,"href":"https:\/\/blog.hoyo.idv.tw\/index.php?rest_route=\/wp\/v2\/posts\/2319\/revisions"}],"predecessor-version":[{"id":13509,"href":"https:\/\/blog.hoyo.idv.tw\/index.php?rest_route=\/wp\/v2\/posts\/2319\/revisions\/13509"}],"wp:attachment":[{"href":"https:\/\/blog.hoyo.idv.tw\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2319"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.hoyo.idv.tw\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2319"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.hoyo.idv.tw\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2319"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}