Abilitare e Disabilitare datepicker da select box

[fabiodj]

Gentili colleghi

Ho bisogno di un aiutino tecnico con javascript o jquery....

Sto creando un sistema di preventivo online per un hotel / residence quindi con la doppia formula.
La mia esigenza sarebbe al momento in cui viene caricata la pagina avere il datepicker disabilitato ed al momento in cui seleziono la formula abilitare lo stesso.
In giro non ho trovato nulla che mi aiuti a capire come fare questo ....
Posto codice

var arr_giorni_da_escludere1 = [];
var arr_giorni_da_escludere = ["Domenica","Lunedì","Martedì","Mercoledì","Giovedì","Venerdì"];
var arr_giorni_settimana = ["Domenica","Lunedì","Martedì","Mercoledì","Giovedì","Venerdì","Sabato"];
var tipologia ='residence';
$(function() {
$('#from').datepicker({ dateFormat: "dd/mm/yy" ,     minDate: new Date(),       defaultDate: '+1w', 
      changeMonth: true,       numberOfMonths: 1,       showOn: "button",       buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
      buttonImageOnly: true,      buttonText: "Select date",
      beforeShowDay: function(date) {if(tipologia=="residence")
return [$.inArray(arr_giorni_settimana[date.getDay()],arr_giorni_da_escludere) == -1,""];
else
return [$.inArray(arr_giorni_settimana[date.getDay()],arr_giorni_da_escludere1) == -1,""];},
onSelect: function(selectedDate) 
{           var date = $(this).datepicker('getDate');
            if ((date= $(this).datepicker('getDate')) && (tipologia=="residence")) 
 { $('#to').val(''+(date.getDate()+7)+'/'+(date.getMonth()+1)+'/'+date.getFullYear());
   $('#to').datepicker('option' , "minDate",  $('#to').val() ); }
 
else 
 { date.setDate(date.getDate() + 1);
 $('#to').val(''+(date.getDate())+'/'+(date.getMonth()+1)+'/'+date.getFullYear());
 $('#to').datepicker('option'  , "minDate",  $('#to').val() );
}}});


$('#to').datepicker( {     dateFormat: "dd/mm/yy" ,  minDate: new Date(),  defaultDate: '+1w', 
      changeMonth: true,  numberOfMonths: 1,      showOn: "button",       buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",       buttonImageOnly: true,
      buttonText: "Select date",       beforeShowDay: function(date) {if(tipologia=="residence")
return [$.inArray(arr_giorni_settimana[date.getDay()],arr_giorni_da_escludere) == -1,""];
else
return [$.inArray(arr_giorni_settimana[date.getDay()],arr_giorni_da_escludere1) == -1,""];},
onSelect: function(selectedDate) 
{           var date = $(this).datepicker('getDate');
            if ((date= $(this).datepicker('getDate')) && (tipologia=="residence")) 
 { $('#from').val(''+(date.getDate()-7)+'/'+(date.getMonth()+1)+'/'+date.getFullYear());
   $('#from').datepicker('option' , "minDate",  $('#from').val() ); }
 
else 
 { date.setDate(date.getDate() - 1);
 $('#from').val(''+(date.getDate())+'/'+(date.getMonth()+1)+'/'+date.getFullYear());
 $('#from').datepicker('option'  , "minDate",  $('#from').val() );
}}});})

Il form invece è

<form name = "calendario" method="POST"  action="preventivo.asp">
<select class=filtertype name=tipologia><option value="0">Seleziona</option><option value="residence" selected>Residence</option><option value="Hotel">Hotel</option></select>
From: <input type="text" name="from"  id="from" class="datepicker">
To: <input type="text" name="to"  id="to" class="datepicker">
Pax: <input type="text" name="pax"></form>

[cavicchiandrea]

Invece di stanziare il datepicker al ready $(function().......}) lo lanci da funzione function datePicher(){..... Codice ......}

[fabiodj]

Andrea Ho provato cosi ma rimangono sempre disabilitati

(function($) {
  $.fn.toggleDisabled = function()
 {
    return this.each(function() 
{
      this.disabled = !this.disabled;
      if ($(this).datepicker("option", "disabled")) 
{
        $(this).datepicker("option", "disabled", false);
      } else
 {
        $(this).datepicker("option", "disabled", true);
      }


    });
  };
})(jQuery);


$("#tipologia").change(function() {
var v = $(this).val();
if (v=='Hotel') {
$(".filtertypeinput").toggleDisabled();
}
});




$("#from").datepicker({
  showOn: "button",
  buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
  buttonImageOnly: true,
  buttonText: "Select date",
  defaultDate: "+1w",
  changeMonth: true,
  changeYear: true,
  numberOfMonths: 1,
  onClose: function(selectedDate) {
    $("#to").datepicker("option", "minDate", selectedDate);
  }
});


$("#to").datepicker({
  showOn: "button",
  buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif ",
  buttonImageOnly: true,
  buttonText: "Select date",
  defaultDate: "+1w",
  changeMonth: true,
  changeYear: true,
  numberOfMonths: 1,
  onClose: function(selectedDate) {
    $("#from").datepicker("option", "maxDate", selectedDate);
  }
});

[cavicchiandrea]

Togli l'istanza dalla function.ready (meglio non riesco a spiegartelo) e richiami il datepicker da funzione:

function date_Picker(){
$("#from").datepicker({
  showOn: "button",
  buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
  buttonImageOnly: true,
  buttonText: "Select date",
  defaultDate: "+1w",
  changeMonth: true,
  changeYear: true,
  numberOfMonths: 1,
  onClose: function(selectedDate) {
    $("#to").datepicker("option", "minDate", selectedDate);
  }
});


$("#to").datepicker({
  showOn: "button",
  buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif ",
  buttonImageOnly: true,
  buttonText: "Select date",
  defaultDate: "+1w",
  changeMonth: true,
  changeYear: true,
  numberOfMonths: 1,
  onClose: function(selectedDate) {
    $("#from").datepicker("option", "maxDate", selectedDate);
  }
});
}

[fabiodj]

Andrea


Andrea
Tu dici di fare una cosa cosi ma a me non va ....

$(document).ready(function() 
{    $("#tipologia").change(function() 
{        if ($(this).val() == "Hotel" || $(this).val() == "Residence") 
{            $("#tipologia").date_Picker();        } 

        else {            $("#txtSearch").datepicker("destroy");

        }    }).change();});

[cavicchiandrea]

No, altrimenti l'avrei detto

[fabiodj]

Andrea ho fatto una modifica e parzialmente funziona.
Solo che ora non mi prende le variabili, il calendario mi compare quando clicco sul campo input mentre invece dovrebbe comparirmi l'immagine accanto e quando seleziono nella select la voce principale non disabilita il datepicker nonostante io ho detto allo script di fare destroy
Mi sapresti suggerire aiuto....

[code]

<script>


$(document).ready(function() {
$("#tipologia").change(function() {
if ($(this).val() == "Hotel" || $(this).val() == "Residence") {
$("#from").datepicker();
$("#to").datepicker();



}
else {
$("#tipologia").datepicker("destroy");
}
}).change();
});


</script>
<script>



var arr_giorni_da_escludere1 = [];
var arr_giorni_da_escludere = ["Domenica","Lunedì","Martedì","Mercoledì","Giovedì ","Venerdì"];
var arr_giorni_settimana = ["Domenica","Lunedì","Martedì","Mercoledì","Giovedì ","Venerdì","Sabato"];
var index = document.calendario.tipologia.selectedIndex;
tipologia = document.calendario.tipologia.options[index].value;




$.datepicker() {


$('#from').datepicker({ dateFormat: "dd/mm/yy" ,
minDate: new Date(),
defaultDate: '+1w',
changeMonth: true,
numberOfMonths: 1,
showOn: "button",
buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
buttonImageOnly: true,
buttonText: "Select date",
beforeShowDay: function(date)


{if(tipologia=="residence")
return [$.inArray(arr_giorni_settimana[date.getDay()],arr_giorni_da_escludere) == -1,""];
else
return [$.inArray(arr_giorni_settimana[date.getDay()],arr_giorni_da_escludere1) == -1,""];},
onSelect: function(selectedDate)
{ var date = $(this).datepicker('getDate');
if ((date= $(this).datepicker('getDate')) && (tipologia=="residence"))
{ $('#to').val(''+(date.getDate()+7)+'/'+(date.getMonth()+1)+'/'+date.getFullYear());
$('#to').datepicker('option' , "minDate", $('#to').val() ); }

else
{ date.setDate(date.getDate() + 1);
$('#to').val(''+(date.getDate())+'/'+(date.getMonth()+1)+'/'+date.getFullYear());
$('#to').datepicker('option' , "minDate", $('#to').val() );
}}});


$('#to').datepicker(
{ dateFormat: "dd/mm/yy" ,
minDate: new Date(),
defaultDate: '+1w',
changeMonth: true,
numberOfMonths: 1,
showOn: "button",
buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
buttonImageOnly: true,
buttonText: "Select date",
beforeShowDay: function(date)


{if(tipologia=="residence")
return [$.inArray(arr_giorni_settimana[date.getDay()],arr_giorni_da_escludere) == -1,""];
else
return [$.inArray(arr_giorni_settimana[date.getDay()],arr_giorni_da_escludere1) == -1,""];},
onSelect: function(selectedDate)
{ var date = $(this).datepicker('getDate');
if ((date= $(this).datepicker('getDate')) && (tipologia=="residence"))
{ $('#from').val(''+(date.getDate()-7)+'/'+(date.getMonth()+1)+'/'+date.getFullYear());
$('#from').datepicker('option' , "minDate", $('#from').val() ); }

else
{ date.setDate(date.getDate() - 1);
$('#from').val(''+(date.getDate())+'/'+(date.getMonth()+1)+'/'+date.getFullYear());
$('#from').datepicker('option' , "minDate", $('#from').val() );
}}});
}</script>

[KillerWorm]

Ciao, buona notizia: quello che chiedi si può risolvere abbastanza semplicemente.
Brutta notizia: il tuo script, a mio parere, è un mezzo pasticcio. Ne ho visto di peggio ma tu sei sulla buona strada (senza offesa).

Prendo in esame lo script sul primo post: l'indentazione è praticamente random (leggibilità: quasi incomprensibile, come fai a capirci qualcosa?!), la maggior parte dello script è ridondante (cioè metà script può essere fatto fuori), alcune istruzioni sono illogiche (bug sicuri durante l'utilizzo).

Se vuoi posso "aiutarti" ad ottimizzare il tutto e darti la soluzione a ciò che chiedi.
Mi devi però spiegare che significa questa condizione (in rosso la parte non chiara):

var date = $(this).datepicker('getDate');
if ((date= $(this).datepicker('getDate')) && (tipologia=="residence"))

[fabiodj]

Killerworm sei un grande se mi aiuti.
Lo script lo avevo rielaborato da solo e come hai detto sono una frana
Cmq il concetto da esprimere deve essere il seguente:

Se la tipologia (hotel o residence) è valorizzata allora attiva il calendario e i relativi campi testo from e to
Logicamente se hotel libertà di permanenza quindi anche un solo giorno; se residence invece da sabato a sabato

[KillerWorm]

Ok.
Faccio qualche ipotesi.

Mettiamo che seleziono "hotel", in tal caso gli input "from" e "to" devono avere una differenza minima di un giorno, giusto? E volendo posso estendere questa differenza a qualsiasi data, oppure c'è un limite di giorni?

Mettiamo che seleziono "residence", ok che sia da sabato a sabato, ma la differenza deve essere esattamente una sola settimana o può comprendere più settimane? In tal caso ci sono dei limiti?