Välj datumspann med jQuery
2012-04-10 -
0
calendar
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!
Får lite välbehövlig hjälp att fixa med elen i verkstaden
Improvisationsteater på Västmanlandsteatern. Lika delar pinsamt och skoj :)
Har ryggskott som börjar bli bättre. Nyser nu på morgonen och det hugger till i ryggen och gör ont som fan. Kollapsar på golvet, och när jag reser mig upp så har jag råkat få igång Siri som tror sig ha hört detta. Ok, det gör ont som fan, men jag är ok, Siri :)
Har en trappa hemma som måste renoveras, menrenoveringskit är dyra som tusan, tanken är att jag ska bygga eget renoveringskit, får se hur det går…
Bakbunden
Även en ordentlig geringsfräs för att kunna bygga hållbara trappnosar
Har införskaffat mig en planopress inför kommande bordsprojekt samt ett test för en trapprenovering.
Byggde en pokalhylla till dotterns alla danspokaler
Pricken över i:et :)
Bakbord
Nytt projekt på gång, bakbord till svärfar :)
“Gå och lägg dig” - ”Nej jag kollar på TV med Leia” :)
Extrabord till jul
Extrabord till julafton klart! Byggvideo kommer inom kort på min youtube :)
Weehoo, jag har en egen stämpel nu. Det ni!
Bordskiva oljad och vaxad, ben borstade och betsade. Kanske blir ett bord till slut?
Bordsskiva betsad. Ska slipas/borstas och sen oljas.
Renoverat vardagsrumsbord
Favoritbild från dansuppvisningen igår
Bordsskiva limmad, hyvlad, slipad och sen borstad. Betsning nästa
Limmar bordsskiva
Nattduksbord
PanPastel-porträtt
Crock Pot
PanPastel
Tron för Sigge
Road Trip Italien!
Verkstad Remake
Jonas och Jenna
Brud som chillar
Showing off
Undressing
Touch thyself
Hot Love
Profilporträtt
Resa utan kamera?
Paus
Supernöjd med folieringen!
Bilen ska folieras!
Ny såg
PHP och BankID
Jack Skellington
Verkstadsplaner
Magnettavla
Verandatak och grillhörna!
Vardagsrumsbord
Knivblock
Kökshylla
Ny ikon för karta
PC-bygge
Kerlee 35mm f/1.2
Objektivhylla
Natalie Dormer
Hållare till kattmatsskålar
Hälsningar från Norge
With a little help from my friends...
The Most Incredible Fantasy Maps You've Ever Seen
Cityfestivalen
Mitakon Speedmaster 50mm/f0,95
10 minuter vatten
Sony A7R II
Petzval 58 Bokeh Control Art Lens
Scrawlrbox
Nya skärmar till jobbet
Nikon Df - ny leksak
Boba Fett
First Order Storm Trooper
Mikisen
#inlineditbutton