Välj datumspann

med jQuery

$(document).ready(function() {

  // First, some datepicker() defaults that apply to both datepickers.
  // Note the format, which is set here but is specified explicitly throughout the script. Change accordingly 
  $.datepicker.setDefaults({
    yearRange: '1930:2030',
    firstDay: 1,
    closeText: 'X',
    changeYear: true,
    changeMonth: true,
    showWeeks: true,
    dateFormat: 'yy-mm-dd',
  });


  $('input[name=period_start]').datepicker({
    onSelect: function(date){
      me = $(this).data('datepicker');                     // my instance
      end = $('input[name=period_stop]');                    // end date input

      mydate = $.datepicker.parseDate('yy-mm-dd', date, me.settings);     // JS Date object with my date
      enddate = $.datepicker.parseDate('yy-mm-dd', end.val(), me.settings);  // JS Date object with end date
      end.datepicker('option', 'minDate', mydate);              // Set minDate of end input so we can't end before we've started

      if (enddate < mydate){
        // The new start date is after the end date
        // So we reset it to the same date as the start date
        end.datepicker('setDate', date);
      }

      // Do we have a max range?
      proxydate = $.datepicker.parseDate('yy-mm-dd', date, me.settings);    // First, a fresh copy of our date
      maxdate = proxydate.setDate(proxydate.getDate()+14);          // Date range is max 14 days
      if (typeof maxdate != 'undefined'){
        // If maxdate is set (i.e. leave this code but comment out the maxdate row above if you don't want to use it
        maxdate = new Date(maxdate);                     // Convert it to a Date object
        if (enddate > maxdate){
          // Our current end date is later than the max range.
          format = $.datepicker.formatDate('yy-mm-dd', maxdate);       // format it nicely for the input
          end.datepicker('setDate', format);                // Set the value of the datepicker
        }
        end.datepicker('option', 'maxDate', maxdate);            // And set the maxDate of the datepicker
      }
      // Update our real input, ignore this if you're dealing with the two inputs directly.
      $('input[name=period]').val(date + ',' + $('input[name=period_stop]').val());
    }

  });
  $('input[name=period_stop]').datepicker({
    minDate: new Date(2012, 3, 10),
    maxDate: new Date(2012, 3, 24),
    onSelect: function(date){
      $('input[name=period]').val($('input[name=period_start]').val() + ',' + date);
    }
  });
});