Tilpas datovisning med jQuery Datepicker

Introduktion til jQuery UI Datepicker

At indsamle datoer fra brugere er en almindelig opgave i webudvikling. Manuel indtastning af datoer kan være fejlbehæftet og frustrerende for brugerne. jQuery UI Datepicker er en populær og yderst konfigurerbar løsning, der gør det muligt for brugere at vælge datoer fra en interaktiv kalender, hvilket forbedrer brugeroplevelsen markant. Denne artikel vil guide dig gennem processen med at integrere og tilpasse jQuery UI Datepicker, med særligt fokus på at ændre datoformater.

Grundlæggende opsætning af Datepicker

Før vi dykker ned i tilpasning, skal vi først have de nødvendige biblioteker inkluderet. Dette inkluderer jQuery UI's CSS-tema og JavaScript-filer.

<link rel = "stylesheet" href = "//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css"> <script src = "https://code.jquery.com/jquery-3.6.0.js"></script> <script src = "https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>

Derefter kan du tilføje en simpel datepicker til et inputfelt ved hjælp af følgende JavaScript-kode:

$ ( function (){ $ ("#datepicker").datepicker(); });

Og det tilsvarende HTML:

<p>Dato: <input type = "text" id = "datepicker"></p>

Når inputfeltet får fokus, vil en kalender vises, hvor brugeren kan vælge en dato.

Tilpasning af datoformater med dateFormat

Standardformatet for jQuery UI Datepicker er MM/DD/YYYY. Mange applikationer kræver dog andre formater, afhængigt af den geografiske placering eller brugerens præferencer. jQuery UI Datepicker tilbyder en enkel løsning til dette via dateFormat-optionen.

Almindelige datoformat-muligheder

Her er nogle af de mest anvendte formater:

• 'yy-mm-dd': Dette format er populært i mange europæiske lande og følger ISO 8601-standarden. Det viser året først, efterfulgt af måneden og dagen, adskilt af bindestreger.
• 'dd/mm/yy': Et meget almindeligt format i mange dele af verden, især i Europa, hvor dagen kommer først, efterfulgt af måneden og året med skråstreger.
• 'mm/dd/yy': Standardformatet, der ofte bruges i USA.
• 'd M, y' (Kort format): Viser dagen, en forkortet måned (f.eks. Jan) og et to-cifret år.
• 'd MM, y' (Medium format): Ligner det korte format, men viser måneden i fuldt navn (f.eks. January).
• 'DD, d MM, yy' (Fuldt format): Viser ugedagen (f.eks. Mandag), dagen, måneden i fuldt navn og det fire-cifrede år.
• Tilpassede formater: Du kan også kombinere disse elementer med tekst for at skabe helt egne formater, f.eks. '\"Dato fundet: \" d \" af \" MM \" i året \" yy'. Bemærk brugen af anførselstegn og backslash for at inkludere bogstaver, der ellers kunne fortolkes som formatkoder.

Eksempel på ændring af datoformat

For at ændre formatet til YYYY-MM-DD, bruger du følgende kode:

$ ( function (){ $ ("#datepicker").datepicker({ dateFormat: "yy-mm-dd" }); });

Tabel over datoformat-koder

Her er en oversigt over de mest almindelige koder, du kan bruge med dateFormat:

Du kan kombinere disse koder for at opnå det ønskede format. For eksempel, for at vise datoen som 'Mandag den 25. December 2023', ville du bruge 'DD, d MM, yy'.

Avancerede funktioner i jQuery UI Datepicker

Måned- og årvalg

For at give brugerne mulighed for nemt at navigere mellem måneder og år, kan du aktivere måned- og årvalgsmenuer:

$ ( function (){ $ ("#datepicker").datepicker({ dateFormat: "yy-mm-dd", changeMonth: true, changeYear: true }); });

Med changeMonth: true og changeYear: true vil der blive vist dropdown-menuer, der gør det lettere at skifte måned og år.

Begrænsning af datointerval

Du kan begrænse de datoer, brugerne kan vælge, ved hjælp af minDate og maxDate optionerne:

$ ( function (){ $ ("#datepicker").datepicker({ dateFormat: "yy-mm-dd", minDate: 0, // Forhindrer valg af tidligere datoer maxDate: "+1M +5D" // Tillader valg op til 1 måned og 5 dage frem }); });

minDate: 0 betyder, at den tidligste dato, der kan vælges, er den aktuelle dag. maxDate: "+1M +5D" tillader valg af datoer op til en måned og fem dage fra den aktuelle dato.

Datepicker med datointerval (Fra dato & Til dato)

En almindelig brugssituation er at lade brugerne vælge et datointerval, f.eks. til booking eller rapportering. Her skal vi sikre, at 'Til dato' ikke kan være tidligere end 'Fra dato'.

JavaScript-kode til datointerval

$ ( function () { var from = $ ("#fromDate") .datepicker({ dateFormat: "yy-mm-dd", changeMonth: true }) .on("change", function() { to.datepicker("option", "minDate", getDate(this)); }); var to = $ ("#toDate").datepicker({ dateFormat: "yy-mm-dd", changeMonth: true }) .on("change", function() { from.datepicker("option", "maxDate", getDate(this)); }); function getDate(element) { var date; var dateFormat = "yy-mm-dd"; try { date = $ .datepicker.parseDate(dateFormat, element.value); } catch( error ) { date = null; } return date; } });

HTML-kode til datointerval

<p> Fra dato: <input type = "text" id = "fromDate"> Til dato: <input type = "text" id = "toDate"> </p>

Denne opsætning sikrer en logisk datovalgproces for brugerne.

Indsendelse af dato med PHP

Når datoen er valgt, skal den ofte sendes til serveren for behandling. Her er et eksempel på, hvordan du kan modtage den valgte dato i PHP.

HTML-formular med Datepicker-input

<form method="post" action="process.php"> <label for="datepicker">Vælg dato:</label> <input type = "text" name = "datepicker" id = "datepicker"> <button type="submit" name="submit">Send</button> </form> <script> $( function () { $("#datepicker").datepicker({ dateFormat: "yy-mm-dd" }); }); </script>

PHP-kode til modtagelse af dato

I din process.php-fil kan du tilgå den indsendte dato:

<?php if(isset( $POST [ 'submit' ])){ $selectedDate = $POST [ 'datepicker' ]; echo 'Valgt dato: ' . $selectedDate ; } ?>

Konklusion

jQuery UI Datepicker er et kraftfuldt værktøj til at forbedre brugerinteraktionen på din hjemmeside. Ved at mestre dateFormat-optionen og andre konfigurationsmuligheder kan du skræddersy datoindtastningsoplevelsen præcist til dine behov. Uanset om du har brug for et specifikt format, datointervaller eller bare en mere intuitiv måde at vælge datoer på, giver jQuery UI Datepicker dig fleksibiliteten til at opnå det. For yderligere detaljer og avancerede indstillinger, se den officielle jQuery UI Datepicker dokumentation.

Ofte Stillede Spørgsmål (FAQ)

Hvad er standard datoformatet i jQuery UI Datepicker?

Standardformatet er mm/dd/yy.

Hvordan ændrer jeg datoformatet til DD-MM-ÅÅÅÅ?

Brug dateFormat: 'dd/mm/yy' i din JavaScript-kode.

Kan jeg begrænse, hvilke datoer der kan vælges?

Ja, du kan bruge minDate og maxDate optionerne til at definere et gyldigt datointerval.

Hvordan viser jeg måned og år i dropdown-form?

Sæt changeMonth: true og changeYear: true.

Hvordan får jeg fat i den valgte dato i JavaScript?

Du kan bruge $('#datepicker').datepicker('getDate'); for at få et JavaScript Date-objekt, eller blot læse værdien fra inputfeltet, når formularen indsendes.

Hvis du vil læse andre artikler, der ligner Tilpas datovisning med jQuery Datepicker, kan du besøge kategorien Teknologi.