Basic jQuery + jQuery UI Datepicker

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title><!-- Title here --></title>
    <link data-require="jqueryui" data-semver="1.10.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
    <link rel="stylesheet" href="style.css" />
    <script data-require="jquery" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script data-require="jqueryui" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
<div class='line'>
  <div>
    <button id="today">today</button>
  </div>
  <div>
    <button id="yesterday">yesterday</button>
  </div>
  <div>
    <button id="tomorrow">tomorrow</button>
  </div>
  <div>
    <button id="this_week">this week</button>
  </div>
  <div>
    <button id="last_7_days">7 days</button>
  </div>
  <div>
    <button id="last_30_days">30 days</button>
  </div>
  <div>
    <button id="this_month">this month</button>
  </div>
</div>
<div class='line'>
  <div>
    <label for="from">From</label>
    <input type="text" id="from" name="from">
    <label for="to">to</label>
    <input type="text" id="to" name="to">
  </div>
  <div>
    <div class='line' id="from_cl"></div>
    <div class='line' id="to_cl"></div>
  </div>
</div>
   </body>

</html>

  $(function()
    {
    var from, to;

    function beforeShowDay(date)
      { return [true, (from <= date && date <= to ? "ui-datepicker-range" : "")]; }

    $("#from_cl").datepicker({
      altField: "#from",
      showOtherMonths: true,
      changeYear: true,
      changeMonth: true,
      hideIfNoPrevNext: true,
      numberOfMonths: 1,
      beforeShowDay: beforeShowDay,
      onSelect: function(selectedDate)
        {
        from = $.datepicker.parseDate($(this).datepicker("option", "dateFormat"), selectedDate)
        if (to < from)
          { to = from; }
        $("#to_cl").datepicker('option', "minDate", from);
        }});

    $("#to_cl").datepicker({
      altField: "#to",
      showOtherMonths: true,
      changeMonth: true,
      changeYear: true,
      hideIfNoPrevNext: true,
      numberOfMonths: 1,
      beforeShowDay: beforeShowDay,
      onSelect: function(selectedDate)
        {
        to = $.datepicker.parseDate($(this).datepicker("option", "dateFormat"), selectedDate)
        $("#from_cl").datepicker("refresh");
        }});

    from = $("#from_cl").datepicker("getDate");
    to = $("#to_cl").datepicker("getDate");
    $("#to_cl").datepicker('option', "minDate", from);
    $("#from_cl,#to_cl").datepicker("refresh");


// additionl buttons   


    function setNewRange(newFrom, newTo)
      {
      from = $("#from_cl").datepicker("setDate", newFrom).datepicker("getDate");
      to = $("#to_cl").datepicker('option', "minDate", from).datepicker("setDate", newTo).datepicker("getDate");
      $("#from_cl,#to_cl").datepicker("refresh");
      }

    $('#today').on('click', function ()
      {
      var dt = new Date();
      setNewRange(dt, dt);
      });

    $('#yesterday').on('click', function ()
      {
      var dt = new Date();
      dt.setDate(dt.getDate() - 1)
      setNewRange(dt, dt);
      });

    $('#tomorrow').on('click', function ()
      {
      var dt = new Date();
      dt.setDate(dt.getDate() + 1)
      setNewRange(dt, dt);
      });

    $('#this_week').on('click', function ()
      {
      var from = new Date();
      from.setDate(from.getDate() - from.getDay());
      var to = new Date(from.getTime());
      to.setDate(to.getDate() + 6);
      setNewRange(from, to);
      });

    $('#last_7_days').on('click', function ()
      {
      var to = new Date();
      var from = new Date(to.getTime());
      from.setDate(from.getDate() - 7)
      setNewRange(from, to);
      });

    $('#last_30_days').on('click', function ()
      {
      var to = new Date();
      var from = new Date(to.getTime());
      from.setDate(from.getDate() - 30)
      setNewRange(from, to);
      });

    $('#this_month').on('click', function ()
      {
      var from = new Date();
      from.setDate(1)
      var to = new Date(from.getTime());
      to.setMonth(to.getMonth()+1)
      to.setDate(0)
      setNewRange(from, to);
      });

    });

.line{
  display:inline-block;
  vertical-align:top}
.ui-datepicker-range>.ui-state-default{
  background:lightblue}