Hoppa direkt till innehåll

Välj datumspann med jQuery

2012-04-10 -
Hade behov av att kunna välja ett datumspann med jQuery för en stund sedan. Alltså ett start- och stoppdatum som sparas i ett formulär. Det är inge problem alls med jQuery. Två stycken INPUT-rutor och sen använder man jQuery's datepicker()-funktion på vardera.
Men nu hade jag ett nytt projekt på gång som kräver att man kan sätta en begränsning på hur långt datumspannet kan vara, och jag letade efter färdiga jQuery-plugins och hittade den här som var en utmärkt datumspann-väljare men som tyvärr inte har någon form av begränsningsmöjlighet.
Så som vanligt får man skriva en själv. Min kod ser ut som nedan. Jag har två INPUT-fält och ett dolt som håller det komponerade värdet. Så när man postar formuläret så får man datumspannet i värdet "period" i formatet "2012-03-24,2012-03-30" till exempel. Men man kan ju strunta i det dolda fältet och bara behandla period_start och period_stop separat.
Daterange
$(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);
    }
  });
});
Så, jag har försökt kommentera koden så bra som möjligt, men grunden är att startdatumet kan du ändra till vad du vill, men både slutdatumets värde och max-värde ändras med den - om det påverkas av startdatumet. Så, om du ändrar startdatumet till att vara efter slutdatumet så uppdateras slutdatumet till samma som startdatumet. Om du ändrar startdatum så att slutdatum är utanför maxvärdet för datumspannet (i exemplet två veckor) så uppdateras slutdatumet till maxvärdet.
Använd och anpassa koden som du vill!
Mer i Tutorials
Expandera korta URLar
Parsea hashtaggar
Repeterande schema i iCal med AppleScript
Vlj datumspann med jQuery
Rkna ungefrlig tid med PHP
CSSruta igen nu med skugga
Skapa snyggare tooltips med jQuery
Nytt projekt på gång: Ljussablar som ljuskälla
Hemma-Spa klart!
Alien: Romulus
Börjar likna en bar!
Reglar på plats
Rivning pågår!
Mjölner!
Örnen börjar bli redo för Sweden Rock
Utebar!
Mixtejp
Norrsken
Kan ha "råkat" skaffa något på Sci-Fi-mässan
Recension: Steam Hotell
Det börjar ta form med hemma-spa:et
Rostfärg och IKEA-lampa
Create a physical book from my digital book
Survey Island
Someone is trying to sell my map!
Julkalender
Myst book updated
Recension: Yasuragi Ryokan Hanare
Recension: Ad Astra
Ny tatuering - midgårdsormen!
Minnestal till en kaffekopp
Förlovade
Sweden Rock 2023
Ny nummerskylt för huset
Fix i husbilen
Grubbelgubbe
Uppdateringar i verkstaden!
Måla med rostfärg
Vårfix i trädgården
Jung Kook
Pappaskämt och annan humor
Bilder på spelbordet när det används
Använda laserskäraren för att skapa innehål...
Julklappar med laserskärare
Budget-Spa
Nyckelskåp
Fjällkaffe
1/20 DeLorean Time Machine
Caso Outdoor Cooler
Minikyl Coca Cola
Verktygsvagn med verktyg, 161 delar
CSS filters for background images
Huset ommålat!
Skiss för tatuering
Spelbordet klart
Laser cutting my Myst Island
We Can Do It