Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="useful-datepicker">
  <div class="form-input">
    <input type="text" placeholder="05-13-2022" />
    <button>
      <svg viewBox="0 0 20 20">
        <path
          d="M9.9987 16.6666C13.6806 16.6666 16.6654 13.6818 16.6654 9.99992C16.6654 6.31802 13.6806 3.33325 9.9987 3.33325C6.3168 3.33325 3.33203 6.31802 3.33203 9.99992C3.33203 13.6818 6.3168 16.6666 9.9987 16.6666Z"
        />
        <path
          d="M6.44531 9.99993C6.44531 9.05686 6.81994 8.15242 7.48679 7.48557C8.15364 6.81872 9.05808 6.44409 10.0011 6.44409"
        />
        <path
          d="M19 4.8042C19.9567 6.46087 16.7025 10.13 11.7317 13C6.76083 15.87 1.95667 16.8525 1 15.1959"
        />
        <path
          d="M0.99972 15.2C0.416387 14.1916 1.39139 12.4416 3.35805 10.575"
        />
        <path
          d="M13.8242 4.54169C16.4159 3.76669 18.4159 3.80003 18.9992 4.80003"
        />
      </svg>
    </button>
  </div>
  <div class="popover">
    <div class="solar-system">
      <div class="rotate">
        <svg class="solar-system-dash" viewBox="0 0 162 162">
          <circle cx="81" cy="81" r="80" stroke-dasharray="3 3" />
        </svg>
        <div class="earth">
          <svg class="earth-dash" viewBox="0 0 43 43">
            <circle cx="21.5" cy="21.5" r="20.5" stroke-dasharray="3 3" />
          </svg>

          <svg class="earth-planet" viewBox="0 0 19 19">
            <path
              d="M9.5 19C14.7467 19 19 14.7467 19 9.5C19 4.25329 14.7467 0 9.5 0C4.25329 0 0 4.25329 0 9.5C0 14.7467 4.25329 19 9.5 19Z"
              fill="#C8E4FF"
            />
            <g fill="#72D172">
              <path
                d="M3.88471e-06 9.50009C-0.00121476 10.846 0.2843 12.1767 0.837539 13.4036C1.39078 14.6305 2.19905 15.7255 3.20852 16.6156L4.04783 15.357C4.04783 15.357 4.64757 15.184 4.77685 14.9519C5.18163 14.2232 4.46294 12.9548 4.46294 12.9548C4.4481 12.6508 4.39962 12.3493 4.31837 12.056C4.21016 11.7863 3.4547 11.4166 3.4547 11.4166C3.4547 11.4166 2.72609 10.2291 2.72609 9.50009C2.71336 9.21423 2.81394 8.9349 3.00597 8.72276C3.198 8.51063 3.46597 8.38282 3.75168 8.36711C3.9927 8.31603 4.22042 8.21522 4.42027 8.07113C4.62012 7.92703 4.78771 7.74283 4.91233 7.53029C4.91233 7.53029 5.83011 7.287 6.04572 6.91072C6.26133 6.53444 5.80326 5.18626 5.80326 5.18626C5.88811 4.83015 5.88499 4.45873 5.79418 4.10409C5.64364 3.77618 5.40909 3.4939 5.11431 3.28585C4.87739 2.69347 4.51691 2.15839 4.05692 1.71629C2.80371 2.59098 1.78039 3.7555 1.07404 5.11074C0.367688 6.46599 -0.000776505 7.97182 3.88471e-06 9.50009Z"
              />
              <path
                d="M9.50212 5.57796e-06C9.24603 5.57796e-06 8.99325 0.013223 8.74253 0.0330491C8.65993 0.288723 8.23408 0.945049 8.34147 1.2412C8.44886 1.53735 9.33071 1.81285 9.33071 1.81285C9.33071 1.81285 9.09692 2.72609 9.50212 3.04951C9.90732 3.37292 10.555 2.9417 10.7974 3.02266C11.0399 3.10361 10.9862 4.69548 10.9862 4.69548C10.9862 4.69548 11.7689 5.55916 12.5384 5.66737C13.3079 5.77559 14.4797 4.46955 14.4797 4.46955C15.3411 4.27363 16.184 4.00416 16.9993 3.66411C16.1119 2.52197 14.975 1.59799 13.6755 0.962895C12.376 0.327803 10.9485 -0.00156322 9.50212 5.57796e-06Z"
              />
              <path
                d="M16.4621 10.1194C16.6782 10.6324 16.0565 11.9418 15.5444 12.1975C15.0201 12.4355 14.5631 12.8 14.2144 13.2582C14.0252 13.5551 13.7769 14.7798 13.1565 15.0227C12.5362 15.2655 11.0645 16.6509 10.2818 16.4349C9.49905 16.2188 9.49905 14.3577 10.0389 13.5209C10.3611 13.0215 9.98479 11.9286 9.95629 11.551C9.92779 11.1735 8.79688 10.4714 8.79688 10.0938C8.79688 9.49987 10.0922 7.93444 10.0922 7.93444C10.0922 7.93444 11.1537 7.58376 11.4775 7.66472C11.8049 7.78379 12.1187 7.93749 12.4135 8.1232C12.9843 8.1658 13.5469 8.28371 14.0867 8.47387L14.7063 9.04057C14.7063 9.04057 16.2461 9.60768 16.4621 10.1194Z"
              />
            </g>
          </svg>

          <div class="moon"></div>
        </div>
      </div>
      <div class="sun">
        <div class="blur blur-1"></div>
        <div class="blur blur-2"></div>
        <div class="blur blur-3"></div>

        <svg viewBox="0 0 40 40">
          <circle cx="20" cy="20" r="20" fill="#FCD385" />
          <circle
            cx="20"
            cy="20"
            r="19.5"
            stroke="white"
            stroke-opacity="0.3"
          />
          <g fill="#FCBF77">
            <path
              d="M31.6474 19.233C31.3129 17.5605 32.5922 16 34.2978 16C35.7906 16 37.0008 17.2101 37.0008 18.7029V20.1926C37.0008 20.726 36.899 21.2544 36.7009 21.7497L35.2287 25.4303C35.0792 25.8039 34.8369 26.1332 34.5245 26.387C32.6032 27.9481 29.879 25.8801 30.8661 23.6098L31.6457 21.8166C31.8769 21.285 31.9398 20.6953 31.8261 20.1269L31.6474 19.233Z"
            />
            <path
              d="M14.6532 30.036C16.8152 31.2915 18.3275 31.703 17.546 33.2191C16.862 34.546 13.8199 35.0027 12.4931 34.3187L11.557 33.8432C10.4128 33.2621 9.4315 32.405 8.70164 31.3495C7.48731 29.5933 6.90159 27.3419 7.83587 25.4221C8.3284 24.41 8.95903 23.746 9.64435 24.5854L10.5166 25.6536C10.7593 25.9508 10.9783 26.2648 11.1956 26.581C11.7656 27.4107 13.0595 29.1106 14.6532 30.036Z"
            />
            <path
              d="M18.0002 14.5C18.0002 16.433 13.9341 19.5 12.0011 19.5C10.0681 19.5 10.4996 16.5 11.0002 14.5C11.5008 12.5 12.5672 11 14.5002 11C16.4332 11 18.0002 12.567 18.0002 14.5Z"
            />
            <path
              d="M19.0008 9C19.0008 9.55228 18.5531 10 18.0008 10C17.4485 10 17.0008 9.55228 17.0008 9C17.0008 8.44772 17.4485 8 18.0008 8C18.5531 8 19.0008 8.44772 19.0008 9Z"
            />
            <path
              d="M21.0008 12.5C21.0008 13.3284 20.5531 14 20.0008 14C19.4485 14 19.0008 13.3284 19.0008 12.5C19.0008 11.6716 19.4485 11 20.0008 11C20.5531 11 21.0008 11.6716 21.0008 12.5Z"
            />
            <path
              d="M30.2809 20.9041C30.0982 21.7122 29.5134 22.2685 28.9747 22.1467C28.436 22.0249 28.1474 21.2711 28.3301 20.4631C28.5128 19.655 29.0976 19.0987 29.6363 19.2205C30.175 19.3423 30.4636 20.0961 30.2809 20.9041Z"
            />
          </g>
        </svg>
      </div>
    </div>
    <div class="action">
      <button class="secondary">Cancel</button>
      <button class="primary">Submit</button>
    </div>
  </div>
</div>

<!-- twitter -->
<a class="twitter" target="_top" href="https://twitter.com/aaroniker_me"><svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" viewBox="0 0 72 72"><path d="M67.812 16.141a26.246 26.246 0 0 1-7.519 2.06 13.134 13.134 0 0 0 5.756-7.244 26.127 26.127 0 0 1-8.313 3.176A13.075 13.075 0 0 0 48.182 10c-7.229 0-13.092 5.861-13.092 13.093 0 1.026.118 2.021.338 2.981-10.885-.548-20.528-5.757-26.987-13.679a13.048 13.048 0 0 0-1.771 6.581c0 4.542 2.312 8.551 5.824 10.898a13.048 13.048 0 0 1-5.93-1.638c-.002.055-.002.11-.002.162 0 6.345 4.513 11.638 10.504 12.84a13.177 13.177 0 0 1-3.449.457c-.846 0-1.667-.078-2.465-.231 1.667 5.2 6.499 8.986 12.23 9.09a26.276 26.276 0 0 1-16.26 5.606A26.21 26.21 0 0 1 4 55.976a37.036 37.036 0 0 0 20.067 5.882c24.083 0 37.251-19.949 37.251-37.249 0-.566-.014-1.134-.039-1.694a26.597 26.597 0 0 0 6.533-6.774z"></path></svg></a>
              
            
!

CSS

              
                .useful-datepicker {
  transform: scale(1.35);

  width: 260px;
  position: relative;

  .form-input {
    input {
      appearance: none;
      border: none;
      outline: none;
      font-family: inherit;
      font-size: 16px;
      font-weight: 500;
      font-feature-settings: "tnum";
      width: 100%;
      color: #f6f6f9;
      background-color: #272c39;
      padding: 12px 16px;
      line-height: 20px;
      margin: 0;
      border-radius: 7px;
      box-shadow: 0px 1px 3px rgba(8, 9, 12, 0.1),
        0px 4px 16px rgba(8, 9, 12, 0.1),
        inset 0px 1px 0px rgba(234, 240, 255, 0.04);

      &::placeholder {
        color: #788199;
        opacity: 1;
      }
    }

    button {
      appearance: none;
      background: none;
      border: none;
      border-radius: 0 7px 7px 0;
      padding: 12px 12px 12px 24px;
      margin: 0;
      position: absolute;
      right: 0;
      top: 0;
      cursor: pointer;

      svg {
        width: 20px;
        height: 20px;
        display: block;
        fill: none;
        stroke: #879aff;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
    }
  }

  .popover {
    background-color: #272c39;
    border-radius: 7px;
    margin-top: 8px;

    .solar-system {
      padding: 32px 40px;
      position: relative;

      .rotate {
        .solar-system-dash {
          width: 180px;
          height: 180px;
          display: block;
          fill: none;
          stroke: #464c5b;
        }

        .earth {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(calc(-50% + 90px), -50%);

          &:before,
          &:after {
            content: "";
            width: 19px;
            height: 19px;
            position: absolute;
            left: 50%;
            top: 50%;
            background: rgba(200, 228, 255, 0.15);
            border-radius: 50%;
          }

          &:before {
            transform: translate(-50%, -50%) scale(1.2);
          }

          &:after {
            transform: translate(-50%, -50%) scale(1.4);
          }

          .earth-dash {
            width: 43px;
            height: 43px;
            display: block;
            fill: none;
            stroke: #464c5b;
          }

          .earth-planet {
            width: 19px;
            height: 19px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
          }

          .moon {
            width: 7px;
            height: 7px;
            background-color: #f2e6f6;
            position: absolute;
            left: 50%;
            top: 50%;
            border-radius: 50%;
            transform: translate(calc(-50% + 21.5px), -50%);
            box-shadow: 0 0 0 1px rgba(242, 230, 247, 0.25);
          }
        }
      }

      .sun {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);

        .blur {
          width: 40px;
          height: 40px;
          position: absolute;
          left: 0;
          right: 0;
          border-radius: 50%;
          background-color: #fcd385;
          opacity: 0.2;

          &.blur-1 {
            animation: sun-blur 3s linear 0s infinite;
          }

          &.blur-2 {
            animation: sun-blur 3s linear -1s infinite;
          }

          &.blur-3 {
            animation: sun-blur 3s linear -2s infinite;
          }
        }

        @keyframes sun-blur {
          50% {
            opacity: 0.2;
          }
          100% {
            opacity: 0;
          }
          100% {
            transform: scale(1.75);
          }
        }

        svg {
          fill: #fcd385;
          width: 40px;
          height: 40px;
          display: block;
          position: relative;
          z-index: 1;
        }
      }
    }

    .action {
      padding: 0 16px 16px 16px;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-gap: 16px;

      button {
        appearance: none;
        background: none;
        border: none;
        border-radius: 5px;
        padding: 6px 0;
        text-align: center;
        font-family: inherit;
        font-size: 12px;
        font-weight: 600;
        line-height: 20px;
        margin: 0;
        cursor: pointer;

        &.secondary {
          color: #788199;
          background: #32394a;
          box-shadow: inset 0px 1px 0px rgba(234, 240, 255, 0.04);
        }

        &.primary {
          color: #fff;
          background: #879aff;
          box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.1);
        }
      }
    }
  }
}

html {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

* {
  box-sizing: inherit;
  &:before,
  &:after {
    box-sizing: inherit;
  }
}

// Center
body {
  min-height: 100vh;
  display: flex;
  font-family: 'Inter', Arial;
  justify-content: center;
  align-items: center;
  background-color: #1c202a;
  .twitter {
    position: fixed;
    display: block;
    right: 12px;
    bottom: 12px;
    svg {
      width: 32px;
      height: 32px;
      fill: #1da1f2;
    }
  }
}
              
            
!

JS

              
                gsap.registerPlugin(Draggable);

const getDateFormat = (date) => {
  return `${(date.getMonth() + 1).toString().padStart(2, "0")}-${date
    .getDate()
    .toString()
    .padStart(2, "0")}-${date.getFullYear()}`;
};

const daysInYear = (year) => {
  return (year % 4 === 0 && year % 100 > 0) || year % 400 == 0 ? 366 : 365;
};

document.querySelectorAll(".useful-datepicker").forEach((datepicker) => {
  const input = datepicker.querySelector("input");

  const today = new Date();

  input.value = getDateFormat(today);

  function updateDate() {
    gsap.set(datepicker.querySelector(".earth"), {
      rotate: `${this.rotation * 3}deg`,
    });

    const percent = (this.rotation / 360) * 100;
    const days = (percent / 100) * daysInYear(today.getFullYear());
    const newDate = new Date();

    newDate.setDate(today.getDate() + days);

    input.value = getDateFormat(newDate);
  }

  Draggable.create(datepicker.querySelector(".rotate"), {
    type: "rotation",
    inertia: true,
    throwResistance: 0.5,
    onDrag: updateDate,
    onThrowUpdate: updateDate,
  });
});

              
            
!
999px

Console