jquery - Booking system med jquery/datepicker og ajax - Udvikleren.dk

Tags: jquery datepicker ajax

Bruger #879 @ 04.05.12 21:58

Hej

Jeg er ved at lave et booking system hvor jeg havde tænkt mig at bruger datepicker fra jquery, tanken er at bygge det op sådan at man har en kalender i toppen(datepicker) hvor man så vælger en dato, den henter så tider ind ved hjælp af noget ajax under kalenderen.

Problemerne er så.

Fjerne muligheden for at vælge dage der allerede er booket, findes det til datepicker så den selv fjerner muligheden for at vælge dem, evt. giver dem en anden baggrund, det skal hentes igennem en count fra mysql?

Hvordan får jeg datoen fra datapicker over i ajax(jquery)

Håber der er

Indlæg senest redigeret d. 04.05.2012 21:59 af Bruger #879

7 svar postet i denne tråd vises herunder
0 indlæg har modtaget i alt 0 karma

Sorter efter stemmer Sorter efter dato

Bruger #3427 @ 04.05.12 22:01

1.520

prøv at giv det her et forsøg: http://davidwalsh.name/jquery-datepicker-disable-days

edit ang at få datoen over i ajax kan du bruge noget ala:

JScript kode

 $.ajax({
  url: "book.php",
  data: {
   dato: $("input[name=date]").val()
  }
 });

Indlæg senest redigeret d. 04.05.2012 22:05 af Bruger #3427

Bruger #879 @ 04.05.12 22:40

Nu har jeg prøvet at få det til at virke men uden held, det er ikke gode tegn når demoen ikke virker

Bruger #3427 @ 04.05.12 23:17

1.520

Nej kan jeg godt se skulle måske lige have testet demoen inden jeg smed et link, men har rettet demoen til så den virker (har lavet den lidt kortere)

JScript kode

 /* create an array of days which need to be disabled */
 var disabledDays = ["5-4-2012","5-5-2012","5-20-2012"];
 
 /* create datepicker */
 jQuery(document).ready(function() {
   jQuery('#date').datepicker({
     dateFormat: 'DD, MM, d, yy',
     constrainInput: true,
     beforeShowDay: function(date){
       return ($.inArray(((date.getMonth()+1).toString() + "-" + date.getDate().toString() + "-" + date.getFullYear().toString()), disabledDays) > -1 ? [false] : [true]);
     }
   });
 });

edit:

tænke kunne lige så godt rette det til så det er dansk dato format.
dag-mdr-år

JScript kode

 /* create an array of days which need to be disabled */
  var disabledDays = ["4-5-2012","5-5-2012","20-5-2012"];
  
  /* create datepicker */
  jQuery(document).ready(function() {
    jQuery('#date').datepicker({
      dateFormat: 'DD, MM, d, yy',
      constrainInput: true,
      beforeShowDay: function(date){
        return ($.inArray((date.getDate().toString() + "-" + (date.getMonth()+1).toString() + "-" + date.getFullYear().toString()), disabledDays) > -1 ? [false] : [true]);
      }
    });
  });

Indlæg senest redigeret d. 04.05.2012 23:48 af Bruger #3427

Bruger #879 @ 05.05.12 01:15

Nu har jeg forsøgt mig lidt frem og er kommet frem til følgende resultat, den henter fint min ajax side men jeg får ikke værdien med for for datepickeren til mit ajax, hvad gør jeg forkert?

JScript kode

 $(document).ready(function() {
             $('#calendar').datepicker({
                 inline: true,
                 firstDay: 1,
                 dateFormat: 'DD-MM-YYYY',
                 showOtherMonths: true,
                 dayNamesMin: ['Søn', 'Man', 'Tir', 'Ons', 'Tor', 'Fre', 'Lør'],
                 monthNames: ["Januar","Februar","Marts","April","Maj","Juni","Juli","August","September","Oktober","November","December"],
                 onSelect: load_page('date=') 
 
             });
         });
         function load_page(data){
             $.ajax({
                 type: "POST",
                 data: data,
                 url: "ajax_showbookings.php",
                 success: function(html){
                     $("#load_page").html(html);
                 },
             });
         }

Bruger #5789 @ 05.05.12 12:55

640

ups, mit indlæg var blevet foreslået

Indlæg senest redigeret d. 05.05.2012 12:56 af Bruger #5789

Bruger #3427 @ 05.05.12 13:18

1.520

har ikke testet det men et bud ville være:

JScript kode

 $(document).ready(function() {
           $('#date').datepicker({
             inline: true,
             firstDay: 1,
             dateFormat: 'DD-MM-YYYY',
             showOtherMonths: true,
             dayNamesMin: ['Søn', 'Man', 'Tir', 'Ons', 'Tor', 'Fre', 'Lør'],
             monthNames: ["Januar","Februar","Marts","April","Maj","Juni","Juli","August","September","Oktober","November","December"],
             onSelect: function(dateStr, obj){
               load_page(
               {
                 "day": obj.selectedDay,
                 "month": obj.selectedMonth,
                 "year": obj.selectedYear
               }
             );
             }
  
           });
         });
         function load_page(data){
           $.ajax({
             type: "POST",
             data: data,
             url: "ajax_showbookings.php",
             success: function(html){
               $("#load_page").html(html);
             }
           });
         }

Bruger #879 @ 06.05.12 17:20

Nu er jeg kommet lidt længere og fået bygget det så småt sammen

Men jeg kan ikke rigtig få det til at spille hvis den også skal disable weekenderne, efter hvad jeg kan se er det noget med at jeg skal sætte noweekends() sammen med beforeShowDay men kan ikke lige få det til at spille

Min jQuery ser sådan her ud

JScript kode

 var disabledDays = ["4-5-2012","5-5-2012","20-5-2012"];
         $(document).ready(function() {
             $('#calendar').datepicker({
                 inline: true,
                 firstDay: 1,
                 dateFormat: 'DD-MM-YYYY',
                 showOtherMonths: true,
                 dayNamesMin: ['Søn', 'Man', 'Tir', 'Ons', 'Tor', 'Fre', 'Lør'],
                 monthNames: ["Januar","Februar","Marts","April","Maj","Juni","Juli","August","September","Oktober","November","December"],
                 onSelect: function(dateStr, obj){
                     load_page(
                         {
                         "day": obj.selectedDay,
                         "month": obj.selectedMonth,
                         "year": obj.selectedYear
                         }
                     );
                 },
                 constrainInput: true,
                 beforeShowDay: function(date){
                     return ($.inArray((date.getDate().toString() + "-" + (date.getMonth()+1).toString() + "-" + date.getFullYear().toString()), disabledDays) > -1 ? [false] : [true]);
                 }
             });
         });
         function load_page(data){
             $.ajax({
                 type: "POST",
                 data: data,
                 url: "ajax_showbookings.php",
                 success: function(html){
                     $("#load_page").html(html);
                 },
             });
         }

Booking system med jquery/datepicker og ajax

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler