{"id":8642,"date":"2024-01-20T17:55:00","date_gmt":"2024-01-20T17:55:00","guid":{"rendered":"https:\/\/codehim.com\/?p=8642"},"modified":"2024-01-22T15:55:36","modified_gmt":"2024-01-22T10:55:36","slug":"scroll-datepicker-in-javascript","status":"publish","type":"post","link":"https:\/\/codehim.com\/date-time\/scroll-datepicker-in-javascript\/","title":{"rendered":"Scroll Datepicker in JavaScript"},"content":{"rendered":"<p>This JavaScript code snippet provides a scrollable datepicker. It allows users to select dates by scrolling (with the mouse wheel) or swiping (on touch devices).<\/p>\n<p>The code works by capturing scroll and touch events on the date, month, and year containers, adjusting the displayed date, month, or year accordingly. It also prevents accidental scrolling on iOS devices.<\/p>\n<p>This code is helpful for creating a user-friendly datepicker that simplifies date selection with scrolling, making it ideal for web applications requiring date inputs.<\/p>\n<h2>How to Create Scroll Datepicker in JavaScript<\/h2>\n<p>1. First, load the <a href=\"https:\/\/fonts.google.com\/\" target=\"_blank\" rel=\"noopener\">Google Fonts<\/a> by adding the following CDN links into the head tag of your HTML document. (Optional)<\/p>\n<pre class=\"prettyprint linenums lang-html\">&lt;link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\"&gt;\r\n&lt;link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;600&amp;display=swap\" rel=\"stylesheet\"&gt;<\/pre>\n<p>2. Create the HTML structure for your datepicker. You can copy the following HTML code as a starting point. The datepicker is contained within a <code>&lt;div&gt;<\/code> with the ID &#8220;picker_container.&#8221;<\/p>\n<pre class=\"prettyprint linenums lang-html\">&lt;div id=\"container\"&gt;\r\n\t&lt;div class=\"glass\"&gt;\r\n\t\t&lt;div class=\"picker\"&gt;\r\n\r\n\t\t\t&lt;h1&gt;Scrollpicker&lt;\/h1&gt;\r\n\r\n\t\t\t&lt;div id=\"picker_container\"&gt;\r\n\r\n\t\t\t\t&lt;div id=\"date_container\"&gt;\r\n\t\t\t\t\t&lt;div id=\"datepicker\"&gt;&lt;\/div&gt;\r\n\t\t\t\t\t&lt;button class=\"buttone\" id=\"dup\" aria-label=\"date up\"&gt;&lt;svg width=\"100%\" height=\"100%\" viewBox=\"0 0 135 60\" style=\"fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:square;stroke-miterlimit:1.5;\"&gt;\r\n\t\t\t\t\t\t\t&lt;path d=\"M15,44.133l52.067,-29.133l52.066,29.133\" style=\"fill:none;stroke:#000;stroke-width:20px;\" \/&gt;\r\n\t\t\t\t\t\t&lt;\/svg&gt;&lt;\/button&gt;\r\n\t\t\t\t\t&lt;button class=\"buttone bdown\" id=\"ddown\" aria-label=\"date down\"&gt;&lt;svg width=\"100%\" height=\"100%\" viewBox=\"0 0 135 60\" style=\"fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:square;stroke-miterlimit:1.5;\"&gt;\r\n\t\t\t\t\t\t\t&lt;path d=\"M15,15l52.067,29.133l52.066,-29.133\" style=\"fill:none;stroke:#000;stroke-width:20px;\" \/&gt;\r\n\t\t\t\t\t\t&lt;\/svg&gt;&lt;\/button&gt;\r\n\t\t\t\t&lt;\/div&gt;\r\n\r\n\t\t\t\t&lt;div id=\"month_container\"&gt;\r\n\t\t\t\t\t&lt;div id=\"monthpicker\"&gt;&lt;\/div&gt;\r\n\t\t\t\t\t&lt;button class=\"buttone\" id=\"mup\" aria-label=\"month up\"&gt;&lt;svg width=\"100%\" height=\"100%\" viewBox=\"0 0 135 60\" style=\"fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:square;stroke-miterlimit:1.5;\"&gt;\r\n\t\t\t\t\t\t\t&lt;path d=\"M15,44.133l52.067,-29.133l52.066,29.133\" style=\"fill:none;stroke:#000;stroke-width:20px;\" \/&gt;\r\n\t\t\t\t\t\t&lt;\/svg&gt;&lt;\/button&gt;\r\n\t\t\t\t\t&lt;button class=\"buttone bdown\" id=\"mdown\" aria-label=\"month down\"&gt;&lt;svg width=\"100%\" height=\"100%\" viewBox=\"0 0 135 60\" style=\"fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:square;stroke-miterlimit:1.5;\"&gt;\r\n\t\t\t\t\t\t\t&lt;path d=\"M15,15l52.067,29.133l52.066,-29.133\" style=\"fill:none;stroke:#000;stroke-width:20px;\" \/&gt;\r\n\t\t\t\t\t\t&lt;\/svg&gt;&lt;\/button&gt;\r\n\t\t\t\t&lt;\/div&gt;\r\n\r\n\t\t\t\t&lt;div id=\"year_container\"&gt;\r\n\t\t\t\t\t&lt;div id=\"yearpicker\"&gt;&lt;\/div&gt;\r\n\t\t\t\t\t&lt;button class=\"buttone\" id=\"yup\" aria-label=\"year up\"&gt;&lt;svg width=\"100%\" height=\"100%\" viewBox=\"0 0 135 60\" style=\"fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:square;stroke-miterlimit:1.5;\"&gt;\r\n\t\t\t\t\t\t\t&lt;path d=\"M15,44.133l52.067,-29.133l52.066,29.133\" style=\"fill:none;stroke:#000;stroke-width:20px;\" \/&gt;\r\n\t\t\t\t\t\t&lt;\/svg&gt;&lt;\/button&gt;\r\n\t\t\t\t\t&lt;button class=\"buttone bdown\" id=\"ydown\" aria-label=\"year down\"&gt;&lt;svg width=\"100%\" height=\"100%\" viewBox=\"0 0 135 60\" style=\"fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:square;stroke-miterlimit:1.5;\"&gt;\r\n\t\t\t\t\t\t\t&lt;path d=\"M15,15l52.067,29.133l52.066,-29.133\" style=\"fill:none;stroke:#000;stroke-width:20px;\" \/&gt;\r\n\t\t\t\t\t\t&lt;\/svg&gt;&lt;\/button&gt;\r\n\t\t\t\t&lt;\/div&gt;\r\n\r\n\t\t\t&lt;\/div&gt;\r\n\r\n\t\t&lt;\/div&gt;\r\n\t&lt;\/div&gt;\r\n\r\n&lt;\/div&gt;\r\n<\/pre>\n<p>3. The following CSS code contains the styling for the datepicker interface. You can customize the styling to match your website&#8217;s design. The CSS code uses CSS variables (custom properties) to define colors and fonts, making it easy to adjust the look and feel of the datepicker.<\/p>\n<pre class=\"prettyprint linenums lang-css\">:root {\r\n\t--c2: rgba(241, 91, 181, 0.6); \/*magenta*\/\r\n\t--c3: rgba(254, 228, 64, 1); \/*yellow*\/\r\n\t--c4: rgba(0, 187, 249, 0.5); \/*blue*\/\r\n\t--c5: rgba(0, 245, 212, 0.5); \/*green*\/\r\n\t--w: rgba(255, 255, 255, 0.1);\r\n\t--fontfam: \"Poppins\", sans-serif;\r\n\t--color: #000;\r\n\t--bordercolor: rgba(65, 65, 65, 0.1);\r\n}\r\n.cd__main{\r\n   position: relative;\r\n   min-height: 720px;\r\n}\r\n#container {\r\n\tposition: absolute;\r\n\ttop: 0;\r\n\tleft: 0;\r\n\twidth: 100%;\r\n\theight: 100%;\r\n\tbackground: linear-gradient(to bottom, var(--c2), var(--w) 75%),\r\n\t\tradial-gradient(circle at 10% 20%, var(--c3) 40%, var(--w) 40%),\r\n\t\tlinear-gradient(20deg, var(--c5) 30%, var(--w) 30%),\r\n\t\tlinear-gradient(-20deg, var(--c4) 30%, var(--w) 30%);\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tjustify-content: center;\r\n\tflex-direction: row;\r\n}\r\n\r\n.glass {\r\n\tposition: absolute;\r\n\tbox-sizing: border-box;\r\n\twidth: 90%;\r\n\theight: 65%;\r\n\tbackground: linear-gradient(\r\n\t\t107.18deg,\r\n\t\trgba(255, 255, 255, 0.6) 0%,\r\n\t\trgba(255, 255, 255, 0.3) 100%\r\n\t);\r\n\tbackdrop-filter: blur(20px);\r\n\t-webkit-backdrop-filter: blur(20px);\r\n\tborder-radius: 30px;\r\n\tborder: 1px solid rgba(255, 255, 255, 0.7);\r\n\t-webkit-background-clip: padding-box;\r\n\tbackground-clip: padding-box;\r\n}\r\n\r\n.picker {\r\n\tdisplay: grid;\r\n\theight: 100%;\r\n\tgrid-template-columns: 100%;\r\n\tgrid-template-rows: 17% 15% 65%;\r\n}\r\n\r\nh1 {\r\n\tpadding: 0;\r\n\tmargin: 0;\r\n\tfont-size: 26px;\r\n\tfont-family: var(--fontfam);\r\n\tfont-weight: bold;\r\n\tcolor: var(--color);\r\n\ttext-align: center;\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tjustify-content: center;\r\n\t\/*background: #39a;*\/\r\n}\r\n\r\n#picker_container {\r\n\tgrid-row-start: 2;\r\n\twidth: 100%;\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tjustify-content: center;\r\n\tflex-direction: row;\r\n\tfont-family: var(--fontfam);\r\n\t\/*background: #69a;*\/\r\n}\r\n\r\n#pbox {\r\n\tgrid-row-start: 3;\r\n\toverflow-y: auto;\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tjustify-content: flex-start;\r\n\tflex-direction: column;\r\n\t\/*background: #34a;*\/\r\n}\r\np {\r\n\twidth: 80%;\r\n\tfont-family: var(--fontfam);\r\n\ttext-align: center;\r\n}\r\n\r\n\/*Desktop Stuff*\/\r\n@media only screen and (min-width: 900px) {\r\n\t.glass {\r\n\t\twidth: 70%;\r\n\t\theight: 60%;\r\n\t}\r\n\t\r\n\t.picker {\r\n\tgrid-template-rows: 30% 20% 40%;\r\n}\r\n\t\r\n\tp {\r\n\twidth: 50%;\r\n}\r\n}\r\n\r\n\/*Datepicker Stuff*\/\r\n#picker_container {\r\n\twidth: 100%;\r\n\t\/*background: #56f;*\/\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tjustify-content: center;\r\n\tflex-direction: row;\r\n}\r\n\r\n#month_container,\r\n#date_container,\r\n#year_container {\r\n\tgrid-row-start: 2;\r\n\theight: 50px;\r\n\tdisplay: grid;\r\n\tgrid-template-columns: 110px 30px;\r\n\tgrid-template-rows: 50% 50%;\r\n\tmargin: 2px;\r\n\tbackground: linear-gradient(\r\n\t\t107.18deg,\r\n\t\trgba(255, 255, 255, 0.2) 0%,\r\n\t\trgba(255, 255, 255, 0.05) 100%\r\n\t);\r\n\tbackdrop-filter: blur(13px);\r\n\tborder-radius: 10px;\r\n\tborder: 1px solid rgba(255, 255, 255, 0.3);\r\n}\r\n\r\n#date_container {\r\n\tgrid-template-columns: 50px 30px;\r\n}\r\n\r\n#year_container {\r\n\tgrid-template-columns: 60px 30px;\r\n}\r\n\r\n#monthpicker,\r\n#datepicker,\r\n#yearpicker {\r\n\twidth: 110px;\r\n\theight: 50px;\r\n\t\/*background: var(--pickercolor);*\/\r\n\tborder-radius: 10px 0 0 10px;\r\n\ttext-align: center;\r\n\tline-height: 50px;\r\n\tcolor: rgba(0, 0, 0, 1);\r\n\tcursor: ns-resize;\r\n}\r\n\r\n#datepicker {\r\n\twidth: 50px;\r\n}\r\n\r\n#yearpicker {\r\n\twidth: 60px;\r\n}\r\n\r\n.buttone {\r\n\tbackground: none;\r\n\tgrid-column-start: 2;\r\n\tgrid-column-stop: 2;\r\n\tgrid-row-start: 1;\r\n\t\/*background: var(--pickercolor);*\/\r\n\tbackground: rgba(255, 255, 255, 0.1);\r\n\tborder-radius: 0 10px 0 0;\r\n\tcursor: pointer;\r\n\tborder-left: 1px solid var(--bordercolor);\r\n\ttouch-action: manipulation;\r\n}\r\n\r\n.bdown {\r\n\tgrid-row-start: 2;\r\n\tgrid-row-stop: 2;\r\n\tborder-radius: 0 0 10px 0;\r\n\tborder-top: 1px solid var(--bordercolor);\r\n}\r\n\r\n\/*style reset*\/\r\nbutton {\r\n\tdisplay: inline-block;\r\n\tborder: none;\r\n\tpadding: none;\r\n\tmargin: 0;\r\n\toutline: none;\r\n\t-webkit-appearance: none;\r\n\t-moz-appearance: none;\r\n}\r\n\r\nbutton:hover,\r\nbutton:focus {\r\n\tbackground: rgba(255, 255, 255, 0.2);\r\n}\r\n\r\nbutton:focus {\r\n\toutline: none;\r\n}\r\n\r\nbutton:active {\r\n\ttransform: scale(1);\r\n}\r\n\r\na,\r\na:link,\r\na:visited {\r\n\tcolor: var(--color);\r\n\ttext-decoration-style: dotted;\r\n}<\/pre>\n<p>4. Finally, include the following JavaScript code within a <code>&lt;script&gt;<\/code> tag in your HTML file, or link to an external JavaScript file. It handles the datepicker&#8217;s functionality. It captures scroll and touch events on the date, month, and year containers and adjusts the displayed date, month, or year accordingly.<\/p>\n<pre class=\"prettyprint linenums lang-js\">\/\/elements\r\nconst container = document.getElementById(\"container\");\r\n\/\/setColor(false);\r\n\r\nconst datepicker = document.getElementById(\"datepicker\");\r\nconst monthpicker = document.getElementById(\"monthpicker\");\r\nconst yearpicker = document.getElementById(\"yearpicker\");\r\n\r\nconst dup = document.getElementById(\"dup\");\r\nconst ddown = document.getElementById(\"ddown\");\r\nconst mup = document.getElementById(\"mup\");\r\nconst mdown = document.getElementById(\"mdown\");\r\nconst yup = document.getElementById(\"yup\");\r\nconst ydown = document.getElementById(\"ydown\");\r\n\r\n\/\/vars\r\nlet lastscrollp = 0;\r\nlet lasttouchp = 0;\r\n\r\nconst months = [\r\n\t\"January\",\r\n\t\"February\",\r\n\t\"March\",\r\n\t\"April\",\r\n\t\"May\",\r\n\t\"June\",\r\n\t\"July\",\r\n\t\"August\",\r\n\t\"September\",\r\n\t\"October\",\r\n\t\"November\",\r\n\t\"December\"\r\n];\r\n\r\n\/\/set start date\r\nlet today = new Date();\r\nlet date_now = today.getDate();\r\nlet month_now = today.getMonth();\r\nlet year_now = today.getFullYear();\r\nconsole.log(date_now, month_now + 1, year_now);\r\n\r\ndatepicker.innerHTML = date_now + \".\";\r\nmonthpicker.innerHTML = months[month_now];\r\nyearpicker.innerHTML = year_now;\r\n\r\n\/\/button events\r\ndup.addEventListener(\"click\", (e) =&gt; {\r\n\tadjustDate(1);\r\n});\r\nddown.addEventListener(\"click\", (e) =&gt; {\r\n\tadjustDate(-1);\r\n});\r\n\r\nmup.addEventListener(\"click\", (e) =&gt; {\r\n\tadjustMonth(1);\r\n});\r\nmdown.addEventListener(\"click\", (e) =&gt; {\r\n\tadjustMonth(-1);\r\n});\r\n\r\nyup.addEventListener(\"click\", (e) =&gt; {\r\n\tadjustYear(1);\r\n});\r\nydown.addEventListener(\"click\", (e) =&gt; {\r\n\tadjustYear(-1);\r\n});\r\n\r\n\/\/wheel &amp; touch events\r\ndatepicker.addEventListener(\"wheel\", (e) =&gt; {\r\n\tconsole.log(\"scroll \" + e.deltaY);\r\n\t\/\/debug.innerHTML = e.deltaY;\r\n\r\n\tlastscrollp = lastscrollp + e.deltaY;\r\n\tif (lastscrollp &gt; 0 &amp;&amp; e.deltaY &lt; 0) {\r\n\t\tlastscrollp = 0;\r\n\t}\r\n\tif (lastscrollp &lt; 0 &amp;&amp; e.deltaY &gt; 0) {\r\n\t\tlastscrollp = 0;\r\n\t}\r\n\tconsole.log(lastscrollp);\r\n\r\n\tif (lastscrollp &gt; 10 || lastscrollp &lt; -10) {\r\n\t\tadjustDate(e.deltaY);\r\n\t\tlastscrollp = 0;\r\n\t}\r\n});\r\n\r\ndatepicker.addEventListener(\"touchstart\", (e) =&gt; {\r\n\tlasttouchp = e.changedTouches[0].pageY;\r\n});\r\n\r\ndatepicker.addEventListener(\"touchmove\", (e) =&gt; {\r\n\te.preventDefault();\r\n\tconsole.log(\"touch \" + e.changedTouches[0].pageY);\r\n\tlet diff = e.changedTouches[0].pageY - lasttouchp;\r\n\tlet updown = 0;\r\n\tif (diff &gt; 10) {\r\n\t\tupdown = -1;\r\n\t\tlasttouchp = e.changedTouches[0].pageY;\r\n\t} else {\r\n\t\tif (diff &lt; -10) {\r\n\t\t\tupdown = 1;\r\n\t\t\tlasttouchp = e.changedTouches[0].pageY;\r\n\t\t}\r\n\t}\r\n\tadjustDate(updown);\r\n});\r\n\r\nmonthpicker.addEventListener(\"wheel\", (e) =&gt; {\r\n\tconsole.log(\"scroll \" + e.deltaY);\r\n\t\/\/debug.innerHTML = e.deltaY;\r\n\r\n\tlastscrollp = lastscrollp + e.deltaY;\r\n\tif (lastscrollp &gt; 0 &amp;&amp; e.deltaY &lt; 0) {\r\n\t\tlastscrollp = 0;\r\n\t}\r\n\tif (lastscrollp &lt; 0 &amp;&amp; e.deltaY &gt; 0) {\r\n\t\tlastscrollp = 0;\r\n\t}\r\n\tconsole.log(lastscrollp);\r\n\r\n\tif (lastscrollp &gt; 10 || lastscrollp &lt; -10) {\r\n\t\tadjustMonth(e.deltaY);\r\n\t\tlastscrollp = 0;\r\n\t}\r\n});\r\n\r\nmonthpicker.addEventListener(\"mouseout\", (e) =&gt; {\r\n\tsetMaxDays();\r\n});\r\n\r\nmonthpicker.addEventListener(\"touchstart\", (e) =&gt; {\r\n\tlasttouchp = e.changedTouches[0].pageY;\r\n});\r\n\r\nmonthpicker.addEventListener(\"touchmove\", (e) =&gt; {\r\n\te.preventDefault();\r\n\tconsole.log(\"touch \" + e.changedTouches[0].pageY);\r\n\tlet diff = e.changedTouches[0].pageY - lasttouchp;\r\n\tlet updown = 0;\r\n\tif (diff &gt; 10) {\r\n\t\tupdown = -1;\r\n\t\tlasttouchp = e.changedTouches[0].pageY;\r\n\t} else {\r\n\t\tif (diff &lt; -10) {\r\n\t\t\tupdown = 1;\r\n\t\t\tlasttouchp = e.changedTouches[0].pageY;\r\n\t\t}\r\n\t}\r\n\tadjustMonth(updown);\r\n});\r\n\r\nmonthpicker.addEventListener(\"touchend\", (e) =&gt; {\r\n\tsetMaxDays();\r\n});\r\n\r\nyearpicker.addEventListener(\"wheel\", (e) =&gt; {\r\n\tconsole.log(\"scroll \" + e.deltaY);\r\n\t\/\/debug.innerHTML = e.deltaY;\r\n\r\n\tlastscrollp = lastscrollp + e.deltaY;\r\n\tif (lastscrollp &gt; 0 &amp;&amp; e.deltaY &lt; 0) {\r\n\t\tlastscrollp = 0;\r\n\t}\r\n\tif (lastscrollp &lt; 0 &amp;&amp; e.deltaY &gt; 0) {\r\n\t\tlastscrollp = 0;\r\n\t}\r\n\tconsole.log(lastscrollp);\r\n\r\n\tif (lastscrollp &gt; 10 || lastscrollp &lt; -10) {\r\n\t\tadjustYear(e.deltaY);\r\n\t\tlastscrollp = 0;\r\n\t}\r\n});\r\n\r\nyearpicker.addEventListener(\"mouseout\", (e) =&gt; {\r\n\tsetMaxDays();\r\n});\r\n\r\nyearpicker.addEventListener(\"touchstart\", (e) =&gt; {\r\n\tlasttouchp = e.changedTouches[0].pageY;\r\n});\r\n\r\nyearpicker.addEventListener(\"touchmove\", (e) =&gt; {\r\n\te.preventDefault();\r\n\tconsole.log(\"touch \" + e.changedTouches[0].pageY);\r\n\tlet diff = e.changedTouches[0].pageY - lasttouchp;\r\n\tlet updown = 0;\r\n\tif (diff &gt; 10) {\r\n\t\tupdown = -1;\r\n\t\tlasttouchp = e.changedTouches[0].pageY;\r\n\t} else {\r\n\t\tif (diff &lt; -10) {\r\n\t\t\tupdown = 1;\r\n\t\t\tlasttouchp = e.changedTouches[0].pageY;\r\n\t\t}\r\n\t}\r\n\tadjustYear(updown);\r\n});\r\n\r\nyearpicker.addEventListener(\"touchend\", (e) =&gt; {\r\n\tsetMaxDays();\r\n});\r\n\r\n\r\n\/\/functions\r\nfunction adjustDate(v) {\r\n\tif (v != 0) {\r\n\t\tlet maxdays = new Date(year_now, month_now + 1, 0).getDate();\r\n\t\tif (v &gt; 0) {\r\n\t\t\tif (date_now === maxdays) {\r\n\t\t\t\tdate_now = 1;\r\n\t\t\t} else {\r\n\t\t\t\tdate_now = date_now + 1;\r\n\t\t\t}\r\n\t\t} else {\r\n\t\t\tif (date_now === 1) {\r\n\t\t\t\tdate_now = maxdays;\r\n\t\t\t} else {\r\n\t\t\t\tdate_now = date_now - 1;\r\n\t\t\t}\r\n\t\t}\r\n\t\tdatepicker.innerHTML = date_now + \".\";\r\n\t\twindow.navigator.vibrate(8);\r\n\t}\r\n}\r\n\r\nfunction adjustMonth(v) {\r\n\tif (v != 0) {\r\n\t\tif (v &gt; 0) {\r\n\t\t\tif (month_now === 11) {\r\n\t\t\t\tmonth_now = 0;\r\n\t\t\t} else {\r\n\t\t\t\tmonth_now = month_now + 1;\r\n\t\t\t}\r\n\t\t} else {\r\n\t\t\tif (month_now === 0) {\r\n\t\t\t\tmonth_now = 11;\r\n\t\t\t} else {\r\n\t\t\t\tmonth_now = month_now - 1;\r\n\t\t\t}\r\n\t\t}\r\n\t\tmonthpicker.innerHTML = months[month_now];\r\n\t\twindow.navigator.vibrate(8);\r\n\t}\r\n}\r\n\r\nfunction adjustYear(v) {\r\n\tif (v != 0) {\r\n\t\tif (v &gt; 0) {\r\n\t\t\tyear_now = year_now + 1;\r\n\t\t} else {\r\n\t\t\tyear_now = year_now - 1;\r\n\t\t}\r\n\t\tif (year_now &lt; 0) {\r\n\t\t\tyearpicker.innerHTML = year_now * -1 + \" BC\";\r\n\t\t} else {\r\n\t\t\tyearpicker.innerHTML = year_now;\r\n\t\t}\r\n\t\twindow.navigator.vibrate(8);\r\n\t\tif(year_now === 2020){\r\n\t\t\tsetColor(true);\r\n\t\t}else{\r\n\t\t\tsetColor(false);\r\n\t\t}\r\n\t}\r\n}\r\n\r\nfunction setMaxDays(){\r\n\tlet maxdays = new Date(year_now, month_now + 1, 0).getDate();\r\n\t\tif (date_now &gt; maxdays) {\r\n\t\t\tdate_now = maxdays;\r\n\t\t\tdatepicker.innerHTML = date_now + \".\";\r\n\t\t}\r\n}\r\n\r\nfunction setColor(g){\r\n\tif (g) {\r\n\tcontainer.style.setProperty(\"--c2\", \"rgba(166, 166, 166, .6)\");\r\n\tcontainer.style.setProperty(\"--c3\", \"rgba(158, 158, 158, 1)\");\r\n\tcontainer.style.setProperty(\"--c4\", \"rgba(125, 125, 125, .5)\");\r\n\tcontainer.style.setProperty(\"--c5\", \"rgba(122, 122, 122, .5)\");\r\n} else {\r\n\tcontainer.style.setProperty(\"--c2\", \"rgba(241, 91, 181, .6)\");\r\n\tcontainer.style.setProperty(\"--c3\", \"rgba(254, 228, 64, 1)\");\r\n\tcontainer.style.setProperty(\"--c4\", \"rgba(0, 187, 249, .5)\");\r\n\tcontainer.style.setProperty(\"--c5\", \"rgba(0, 245, 212, .5)\");\r\n}\r\n}\r\n\r\n\/\/prevent ape-scrolling on iOS\r\nlet letTouchMove = false;\r\ncontainer.addEventListener(\"touchmove\", (e) =&gt; {\r\n\tif (letTouchMove === false) {\r\n\t\te.preventDefault();\r\n\t}\r\n});\r\n\r\nconst pbox = document.getElementById(\"pbox\");\r\npbox.addEventListener(\"touchstart\", (e) =&gt; {\r\n\tletTouchMove = true;\r\n});\r\npbox.addEventListener(\"touchend\", (e) =&gt; {\r\n\tletTouchMove = false;\r\n});<\/pre>\n<p>That&#8217;s it! Hopefully, you&#8217;ve created a scrollable datepicker using JavaScript. This user-friendly datepicker simplifies date selection for your web application users. If you have any questions or suggestions, feel free to comment below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This JavaScript code snippet provides a scrollable datepicker. It allows users to select dates by scrolling (with the mouse wheel)&#8230;<\/p>\n","protected":false},"author":1,"featured_media":8651,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[58],"tags":[],"class_list":["post-8642","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-date-time"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Scroll Datepicker in JavaScript &#8212; CodeHim<\/title>\n<meta name=\"description\" content=\"Here is a free code snippet to create a Scroll Datepicker in JavaScript. You can view demo and download the source code.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codehim.com\/date-time\/scroll-datepicker-in-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Scroll Datepicker in JavaScript &#8212; CodeHim\" \/>\n<meta property=\"og:description\" content=\"Here is a free code snippet to create a Scroll Datepicker in JavaScript. You can view demo and download the source code.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codehim.com\/date-time\/scroll-datepicker-in-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"CodeHim\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codehimofficial\" \/>\n<meta property=\"article:published_time\" content=\"2024-01-20T17:55:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-22T10:55:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/09\/Scroll-Datepicker-In-JavaScript.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"960\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Asif Mughal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:site\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Asif Mughal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/codehim.com\/date-time\/scroll-datepicker-in-javascript\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/date-time\/scroll-datepicker-in-javascript\/\"},\"author\":{\"name\":\"Asif Mughal\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\"},\"headline\":\"Scroll Datepicker in JavaScript\",\"datePublished\":\"2024-01-20T17:55:00+00:00\",\"dateModified\":\"2024-01-22T10:55:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codehim.com\/date-time\/scroll-datepicker-in-javascript\/\"},\"wordCount\":271,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/date-time\/scroll-datepicker-in-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/09\/Scroll-Datepicker-In-JavaScript.png\",\"articleSection\":[\"Date &amp; Time\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/codehim.com\/date-time\/scroll-datepicker-in-javascript\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codehim.com\/date-time\/scroll-datepicker-in-javascript\/\",\"url\":\"https:\/\/codehim.com\/date-time\/scroll-datepicker-in-javascript\/\",\"name\":\"Scroll Datepicker in JavaScript &#8212; CodeHim\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codehim.com\/date-time\/scroll-datepicker-in-javascript\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/date-time\/scroll-datepicker-in-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/09\/Scroll-Datepicker-In-JavaScript.png\",\"datePublished\":\"2024-01-20T17:55:00+00:00\",\"dateModified\":\"2024-01-22T10:55:36+00:00\",\"description\":\"Here is a free code snippet to create a Scroll Datepicker in JavaScript. You can view demo and download the source code.\",\"breadcrumb\":{\"@id\":\"https:\/\/codehim.com\/date-time\/scroll-datepicker-in-javascript\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codehim.com\/date-time\/scroll-datepicker-in-javascript\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/date-time\/scroll-datepicker-in-javascript\/#primaryimage\",\"url\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/09\/Scroll-Datepicker-In-JavaScript.png\",\"contentUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/09\/Scroll-Datepicker-In-JavaScript.png\",\"width\":1280,\"height\":960,\"caption\":\"Scroll Datepicker In JavaScript\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codehim.com\/date-time\/scroll-datepicker-in-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/codehim.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Date &amp; Time\",\"item\":\"https:\/\/codehim.com\/category\/date-time\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Scroll Datepicker in JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/codehim.com\/#website\",\"url\":\"https:\/\/codehim.com\/\",\"name\":\"CodeHim\",\"description\":\"Web Design Code Snippets\",\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"alternateName\":\"Web Design Codes\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/codehim.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/codehim.com\/#organization\",\"name\":\"CodeHim - Web Design Code & Scripts\",\"url\":\"https:\/\/codehim.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\",\"url\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"contentUrl\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"width\":280,\"height\":280,\"caption\":\"CodeHim - Web Design Code & Scripts\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/codehimofficial\",\"https:\/\/x.com\/CodeHimOfficial\",\"https:\/\/www.instagram.com\/codehim\/\",\"https:\/\/www.linkedin.com\/company\/codehim\",\"https:\/\/co.pinterest.com\/codehim\/\",\"https:\/\/www.youtube.com\/@codehim\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\",\"name\":\"Asif Mughal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"caption\":\"Asif Mughal\"},\"description\":\"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.\",\"sameAs\":[\"https:\/\/codehim.com\"],\"url\":\"https:\/\/codehim.com\/author\/asif-mughal\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Scroll Datepicker in JavaScript &#8212; CodeHim","description":"Here is a free code snippet to create a Scroll Datepicker in JavaScript. You can view demo and download the source code.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/codehim.com\/date-time\/scroll-datepicker-in-javascript\/","og_locale":"en_US","og_type":"article","og_title":"Scroll Datepicker in JavaScript &#8212; CodeHim","og_description":"Here is a free code snippet to create a Scroll Datepicker in JavaScript. You can view demo and download the source code.","og_url":"https:\/\/codehim.com\/date-time\/scroll-datepicker-in-javascript\/","og_site_name":"CodeHim","article_publisher":"https:\/\/www.facebook.com\/codehimofficial","article_published_time":"2024-01-20T17:55:00+00:00","article_modified_time":"2024-01-22T10:55:36+00:00","og_image":[{"width":1280,"height":960,"url":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/09\/Scroll-Datepicker-In-JavaScript.png","type":"image\/png"}],"author":"Asif Mughal","twitter_card":"summary_large_image","twitter_creator":"@CodeHimOfficial","twitter_site":"@CodeHimOfficial","twitter_misc":{"Written by":"Asif Mughal","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codehim.com\/date-time\/scroll-datepicker-in-javascript\/#article","isPartOf":{"@id":"https:\/\/codehim.com\/date-time\/scroll-datepicker-in-javascript\/"},"author":{"name":"Asif Mughal","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed"},"headline":"Scroll Datepicker in JavaScript","datePublished":"2024-01-20T17:55:00+00:00","dateModified":"2024-01-22T10:55:36+00:00","mainEntityOfPage":{"@id":"https:\/\/codehim.com\/date-time\/scroll-datepicker-in-javascript\/"},"wordCount":271,"commentCount":0,"publisher":{"@id":"https:\/\/codehim.com\/#organization"},"image":{"@id":"https:\/\/codehim.com\/date-time\/scroll-datepicker-in-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/09\/Scroll-Datepicker-In-JavaScript.png","articleSection":["Date &amp; Time"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codehim.com\/date-time\/scroll-datepicker-in-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codehim.com\/date-time\/scroll-datepicker-in-javascript\/","url":"https:\/\/codehim.com\/date-time\/scroll-datepicker-in-javascript\/","name":"Scroll Datepicker in JavaScript &#8212; CodeHim","isPartOf":{"@id":"https:\/\/codehim.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codehim.com\/date-time\/scroll-datepicker-in-javascript\/#primaryimage"},"image":{"@id":"https:\/\/codehim.com\/date-time\/scroll-datepicker-in-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/09\/Scroll-Datepicker-In-JavaScript.png","datePublished":"2024-01-20T17:55:00+00:00","dateModified":"2024-01-22T10:55:36+00:00","description":"Here is a free code snippet to create a Scroll Datepicker in JavaScript. You can view demo and download the source code.","breadcrumb":{"@id":"https:\/\/codehim.com\/date-time\/scroll-datepicker-in-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codehim.com\/date-time\/scroll-datepicker-in-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/date-time\/scroll-datepicker-in-javascript\/#primaryimage","url":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/09\/Scroll-Datepicker-In-JavaScript.png","contentUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/09\/Scroll-Datepicker-In-JavaScript.png","width":1280,"height":960,"caption":"Scroll Datepicker In JavaScript"},{"@type":"BreadcrumbList","@id":"https:\/\/codehim.com\/date-time\/scroll-datepicker-in-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codehim.com\/"},{"@type":"ListItem","position":2,"name":"Date &amp; Time","item":"https:\/\/codehim.com\/category\/date-time\/"},{"@type":"ListItem","position":3,"name":"Scroll Datepicker in JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/codehim.com\/#website","url":"https:\/\/codehim.com\/","name":"CodeHim","description":"Web Design Code Snippets","publisher":{"@id":"https:\/\/codehim.com\/#organization"},"alternateName":"Web Design Codes","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codehim.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codehim.com\/#organization","name":"CodeHim - Web Design Code & Scripts","url":"https:\/\/codehim.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/","url":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","contentUrl":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","width":280,"height":280,"caption":"CodeHim - Web Design Code & Scripts"},"image":{"@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codehimofficial","https:\/\/x.com\/CodeHimOfficial","https:\/\/www.instagram.com\/codehim\/","https:\/\/www.linkedin.com\/company\/codehim","https:\/\/co.pinterest.com\/codehim\/","https:\/\/www.youtube.com\/@codehim"]},{"@type":"Person","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed","name":"Asif Mughal","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","caption":"Asif Mughal"},"description":"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.","sameAs":["https:\/\/codehim.com"],"url":"https:\/\/codehim.com\/author\/asif-mughal\/"}]}},"views":3530,"_links":{"self":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/8642","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/comments?post=8642"}],"version-history":[{"count":0,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/8642\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media\/8651"}],"wp:attachment":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media?parent=8642"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/categories?post=8642"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/tags?post=8642"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}