Svelte date-picker

date-picker.html

<table>
  <tr>
    <td class="btn" on:click="go(-1)">&#9664;</td>
    <td colspan=5>{month} {year}</td>
    <td class="btn" on:click="go(+1)">&#9654;</td>
  </tr>
  <tr>
    {#each days as day}
    <th>{day}</th>
    {/each}
  </tr>
  {#each weeks as week}
  <tr>
    {#each week as day}
    <td class="btn {day.class}" on:click="set({offset:0, date: day.value})">{day.date}</td>
    {/each}
  </tr>
  {/each}
</table>

<style>
  td, th {
    width: 28px;
    text-align: center;
    border-radius: 4px;
    line-height: 24px;
    margin: 0;
    padding: 0;
  }
  td.past, td.future {
    opacity: 0.5;
  }
  .btn {
    cursor: pointer;
  }
  .btn:hover {
    background: gray;
    color: white;
  }
  td.selected {
    color: #ffffff;
    font-weight: bold;
    background-color: #006dcc;
    border-color: #002a80;
  }
</style>

<script>
  function iso(date) {
    const pad = n => n < 10 ? "0" + n : n;
    return date.getFullYear() + "-" + pad(date.getMonth()+1) + "-" + pad(date.getDate());
  }
  export default {
    data() {
      return {
        date: iso(new Date()),
        days: 'Su|Mo|Tu|We|Th|Fr|Sa'.split('|'),
        months: 'Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec'.split('|'),
        start: 0, // first day of the week (0 = Sunday, 1 = Monday)
        offset: 0 // offset in months from currently selected date
      };
    },
    
    methods: {
      go(direction) {
				var { offset } = this.get();
        this.set({ offset: offset + direction });
      }
    },

    computed: {
      _date({date, offset}) {
        var _date = new Date(date);
        _date.setMonth(_date.getMonth() + offset);
        return _date;
      },
      month({_date, months}) {
        return months[_date.getMonth()];
      },
      year({_date}) {
        return _date.getFullYear()
      },
      weeks({_date, date, start}) {
        var first = new Date(_date.getTime());
        first.setDate(1);
        first.setDate(first.getDate() + ((start - first.getDay() - 7) % 7));

        var last = new Date(_date.getTime());
        last.setDate(new Date(_date.getFullYear(), _date.getMonth() + 1, 0).getDate());
        last.setDate(last.getDate() + ((start - last.getDay() + 6) % 7));

        var d = new Date(first.getTime()),
            M = _date.getMonth(),
            Y = _date.getFullYear(),
            week = [],
            weeks = [week];

        while (d.getTime() <= last.getTime()) {
          var dd = d.getDate(),
              mm = d.getMonth(),
              yy = d.getFullYear(),
              value = iso(d);

          week.push({
            date: dd,
            value,
            class: [
              date === value ? "selected" : "",
              mm == M ? "" : ((mm > M ? yy >= Y : yy > Y) ? "future" : "past")
            ].join(' ')
          });

          d = new Date(d.getFullYear(), d.getMonth(), d.getDate() + 1);

          if (d.getDay() === start) {
            week = [];
            weeks.push(week);
          }
        }

        return weeks;
      }
    }
  };
</script>

Recently updated to Svelte 3 - if you'd like to compare with an older version of Svelte, check here.