Countdown to Your Wedding Day

Wedding Countdown Timer

Counting down the days to your wedding just got easier! Enter your wedding date below to see the exact number of days, hours, and minutes until you say “I do.” This simple, animated countdown is perfect for building excitement and keeping everyone in the loop. Want to share the countdown with your partner, family, or friends? Instantly generate a unique link that fills in your special date, so everyone can join in the anticipation!

Set Your Wedding Date:

Set your date to begin!

—

Days

—

Hours

—

Minutes

—

Seconds

Add This Wedding Countdown Timer to Your Website

Want to share this wedding countdown on your own blog or wedding website? Simply click the button below to copy all the code. Then, paste it into an HTML block or section on your site. Your visitors will be able to enter their own wedding date and share a personalized countdown link—no plugins or signup needed!

<!-- BEGIN Wedding Countdown Timer -->
<div id="wedding-countdown" style="max-width:420px;margin:0 auto 30px auto;padding:24px 18px 16px 18px;border-radius:18px;box-shadow:0 2px 10px rgba(0,0,0,0.07);background:#fff;font-family:sans-serif;text-align:center;">
  <label for="wedding-date" style="font-size:1.08em;color:#555;">Set Your Wedding Date:</label>
  <input type="date" id="wedding-date" style="padding:8px 12px;margin:12px 0 8px 0;border-radius:8px;border:1px solid #ccc;font-size:1.07em;" />
  <div id="selected-date" style="font-size:1.07em;color:#888;margin-bottom:12px;min-height:24px;"></div>
  <div id="countdown-display" style="margin-top:12px;">
    <div id="countdown-message" style="font-size:1.2em;color:#444;margin-bottom:10px;">Set your date to begin!</div>
    <div style="display:flex;justify-content:center;gap:18px;">
      <div class="timer-segment">
        <div class="timer-num" id="days" style="font-size:2.6em;color:#B76E79;font-weight:bold;transition:.25s;">—</div>
        <div class="timer-label" style="font-size:.95em;color:#888;">Days</div>
      </div>
      <div class="timer-segment">
        <div class="timer-num" id="hours" style="font-size:2.6em;color:#B76E79;font-weight:bold;transition:.25s;">—</div>
        <div class="timer-label" style="font-size:.95em;color:#888;">Hours</div>
      </div>
      <div class="timer-segment">
        <div class="timer-num" id="minutes" style="font-size:2.6em;color:#B76E79;font-weight:bold;transition:.25s;">—</div>
        <div class="timer-label" style="font-size:.95em;color:#888;">Minutes</div>
      </div>
      <div class="timer-segment">
        <div class="timer-num" id="seconds" style="font-size:2.6em;color:#B76E79;font-weight:bold;transition:.25s;">—</div>
        <div class="timer-label" style="font-size:.95em;color:#888;">Seconds</div>
      </div>
    </div>
  </div>
  <!-- Share My Countdown feature -->
  <div id="share-countdown" style="display:none;text-align:center;margin-top:20px;">
    <div style="font-size:1em;margin-bottom:7px;color:#555;">Share your countdown:</div>
    <input id="share-link" type="text" style="width:75%;padding:6px;border-radius:8px;border:1px solid #ccc;font-size:1em;" readonly />
    <button onclick="copyShareLink()" style="background:#B76E79;color:#fff;padding:7px 14px;border:none;border-radius:8px;cursor:pointer;margin-left:7px;">Copy Link</button>
    <div id="copy-success" style="color:#45c3ac;margin-top:8px;display:none;">Link copied!</div>
  </div>
</div>
<script>
function formatDate(dateStr) {
  const months = ["January","February","March","April","May","June","July","August","September","October","November","December"];
  const d = new Date(dateStr);
  if (isNaN(d.getTime())) return "";
  return months[d.getMonth()] + " " + d.getDate() + ", " + d.getFullYear();
}
let countdownInterval;
document.getElementById('wedding-date').addEventListener('change', function() {
    if (countdownInterval) clearInterval(countdownInterval);
    const dateStr = this.value;
    document.getElementById('selected-date').textContent = dateStr ? "Wedding Date: " + formatDate(dateStr) : "";
    if (!dateStr) return;
    const weddingDate = new Date(dateStr + "T00:00:00");
    function updateCountdown() {
        const now = new Date();
        const diff = weddingDate - now;
        if (diff <= 0) {
            document.getElementById('countdown-message').textContent = "Congratulations! It's your wedding day!";
            ['days','hours','minutes','seconds'].forEach(id=>document.getElementById(id).textContent='00');
            clearInterval(countdownInterval);
            return;
        }
        const days = Math.floor(diff / (1000 * 60 * 60 * 24));
        const hours = Math.floor((diff / (1000 * 60 * 60)) % 24);
        const minutes = Math.floor((diff / (1000 * 60)) % 60);
        const seconds = Math.floor((diff / 1000) % 60);
        ['days','hours','minutes','seconds'].forEach(id=>{
          let el = document.getElementById(id);
          if (el.textContent !== String(eval(id))) {
            el.style.transform = "scale(1.22)";
            setTimeout(()=>{ el.style.transform = "scale(1)"; }, 180);
          }
        });
        document.getElementById('countdown-message').textContent = `Only ${days} days to go!`;
        document.getElementById('days').textContent = String(days).padStart(2,'0');
        document.getElementById('hours').textContent = String(hours).padStart(2,'0');
        document.getElementById('minutes').textContent = String(minutes).padStart(2,'0');
        document.getElementById('seconds').textContent = String(seconds).padStart(2,'0');
    }
    updateCountdown();
    countdownInterval = setInterval(updateCountdown, 1000);
    const link = window.location.origin + window.location.pathname + '?date=' + dateStr;
    document.getElementById('share-link').value = link;
    document.getElementById('share-countdown').style.display = 'block';
});
function copyShareLink() {
  const input = document.getElementById('share-link');
  input.select();
  document.execCommand('copy');
  document.getElementById('copy-success').style.display = 'block';
  setTimeout(()=>{ document.getElementById('copy-success').style.display = 'none'; }, 1800);
}
window.addEventListener('DOMContentLoaded',function(){
  const urlParams = new URLSearchParams(window.location.search);
  const date = urlParams.get('date');
  if(date){
    document.getElementById('wedding-date').value = date;
    document.getElementById('selected-date').textContent = "Wedding Date: " + formatDate(date);
    const event = new Event('change');
    document.getElementById('wedding-date').dispatchEvent(event);
  }
});
</script>
<!-- END Wedding Countdown Timer -->