JQuery ui - selezione data, disabilitazione date specifiche

Sto tentando di disabilitare date specifiche utilizzando l'interfaccia utente di JQuery. Tuttavia, sto avendo fortuna, qui è il mio codice:JQuery ui - selezione data, disabilitazione date specifiche

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en"> 
<head> 
<link rel="stylesheet" type="text/css" href="development-bundle/themes/ui-lightness/jquery.ui.all.css"> 
<style type="text/css"> 
.ui-datepicker .preBooked_class { background:#111111; } 
.ui-datepicker .preBooked_class span { color:#999999; } 
</style> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>jQuery UI Datepicker</title> 
<script type="text/javascript" src="development-bundle/jquery-1.7.1.js"></script> 
<script type="text/javascript" src="development-bundle/ui/jquery.ui.core.js"></script> 
<script type="text/javascript" src="development-bundle/ui/jquery.ui.widget.js"></script> 
<script type="text/javascript" src="development-bundle/ui/jquery.ui.datepicker.js"></script>

oggetto un'istanza di datepicker

<script type="text/javascript"> 

    $(function() { 
    $("#iDate").datepicker({ 

    dateFormat: 'dd MM yy', 
    beforeShowDay: checkAvailability 
    }); 

    })

ottenere la date per essere disattivato all'interno del calendario

var unavailableDates = ["9-3-2012","14-3-2012","15-3-2012"]; 

function unavailable(date) { 
    dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" + date.getFullYear(); 
    if ($.inArray(dmy, unavailableDates) == -1) { 
    return [true, ""]; 
    } else { 
    return [false,"","Unavailable"]; 
    } 
} 

$('#iDate').datepicker({ beforeShowDay: unavailable }); 

</script> 
</head> 
<body> 
<input id="iDate"> 
</body> 
</html>

non lo fa sembra funzionare, qualsiasi idea su come posso risolvere questo. Saluti.

fonte

2012-03-16 bobo2000

Sembra che chiami lo datepicker due volte su un input. Il suo un po 'difficile da seguire il codice, ma se si ri-organizzare e rimuovere il secondo datepicker chiamata, tutto dovrebbe funzionare:

<script type="text/javascript"> 
    var unavailableDates = ["9-3-2012", "14-3-2012", "15-3-2012"]; 

    function unavailable(date) { 
     dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear(); 
     if ($.inArray(dmy, unavailableDates) == -1) { 
      return [true, ""]; 
     } else { 
      return [false, "", "Unavailable"]; 
     } 
    } 

    $(function() { 
     $("#iDate").datepicker({ 
      dateFormat: 'dd MM yy', 
      beforeShowDay: unavailable 
     }); 

    }); 
</script>

Esempio:http://jsfiddle.net/daCrosby/JjPrU/334/

fonte

2012-03-16 18:08:36

Funziona perfettamente, una domanda veloce andrew. Come posso adattare questo in modo che invece delle date non disponibili vengano codificate nell'array, le date vengono recuperate da una tabella di database. Saluti. – bobo2000

@ bobo2000: dipende dalla tecnologia lato server. Ma immagino che tu incorpori la matrice di date escluse nella pagina sul caricamento della pagina invece di codificarle nel codice JavaScript. –

Utilizzo di PHP. Dovrò interrogare il db e poi riempire l'array con il set di risultati? – bobo2000

Utile answer..If voi consiglia di disattivare una giornata perticular, si può fare come di seguito:

  $scope.dateOptions = { 
      beforeShowDay: unavailable 
      }; 

      function unavailable(date) { 
       if (date.getDay() === 0) { 
        return [true, ""]; 
       } else { 
        return [false, "", "Unavailable"]; 
       } 
      }

quanto sopra consentirà solo Domenica e tutti gli altri giorni saranno disattivati. Spero che questo ti aiuti.

fonte

2016-09-30 07:16:37 Deva

JQuery ui - selezione data, disabilitazione date specifiche

risposta

Problemi correlati