jQuery Daterange

[dusandevic]

Kako da u ovom primeru namestim ograničenje za datum, tako da razlika između dva unosa ne sme biti veća od 4 meseca?

<meta charset="utf-8"> 	 	 	 	 	 	 	 	<script> 	$(function() { 		var dates = $( "#from, #to" ).datepicker({ 			defaultDate: "+1w", 			changeMonth: true, 			numberOfMonths: 3, 			onSelect: function( selectedDate ) { 				var option = this.id == "from" ? "minDate" : "maxDate", 					instance = $( this ).data( "datepicker" ), 					date = $.datepicker.parseDate( 						instance.settings.dateFormat || 						$.datepicker._defaults.dateFormat, 						selectedDate, instance.settings ); 				dates.not( this ).datepicker( "option", option, date ); 			} 		}); 	}); 	</script>    <div class="demo">  <label for="from">From</label> <input type="text" id="from" name="from"/> <label for="to">to</label> <input type="text" id="to" name="to"/>  </div><!-- End demo -->    <div class="demo-description"> <p>Select the date range to search for.</p> </div><!-- End demo-description -->

Link do izvora skripte

Trudim se, ali ne znam ovaj JavaScript

[Remedy]

Tvoj kod baš i nije čitko postavljen , ali na primeru stranice na koju si postavio link. Datepicker ima opcije minDate i maxDate (među ostalima, vide se na tabu Options na toj stranici). Na primeru koda sa te stranice (onaj deo koji se pojavi kada odeš na "view source"):

<script>
$(function() {
	var dates = $( "#from, #to" ).datepicker({
		defaultDate: "+1w",
		changeMonth: true,
		numberOfMonths: 3,

		/* Sledece 2 linije su dodate */
		minDate: "0d",
		maxDate: "+4m",

		onSelect: function( selectedDate ) {
			var option = this.id == "from" ? "minDate" : "maxDate",
				instance = $( this ).data( "datepicker" ),
				date = $.datepicker.parseDate(
					instance.settings.dateFormat ||
					$.datepicker._defaults.dateFormat,
					selectedDate, instance.settings );
			dates.not( this ).datepicker( "option", option, date );
		}
	});
});
</script>

Ovako bi minimalni dan za unos bio današnji dan, a maksimalni za 4 meseca. Nadam se da si to nameravao (ako nije onda pogledaj opis opcija minDate i maxDate).
Naravno, podatke moraš da iskontrolišeš i na serverskoj strani.

[dusandevic]

Remedy kaže:

Tvoj kod baš i nije čitko postavljen , ali na primeru stranice na koju si postavio link. Datepicker ima opcije minDate i maxDate (među ostalima, vide se na tabu Options na toj stranici). Na primeru koda sa te stranice (onaj deo koji se pojavi kada odeš na "view source"):

<script>
$(function() {
    var dates = $( "#from, #to" ).datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 3,

        /* Sledece 2 linije su dodate */
        minDate: "0d",
        maxDate: "+4m",

        onSelect: function( selectedDate ) {
            var option = this.id == "from" ? "minDate" : "maxDate",
                instance = $( this ).data( "datepicker" ),
                date = $.datepicker.parseDate(
                    instance.settings.dateFormat ||
                    $.datepicker._defaults.dateFormat,
                    selectedDate, instance.settings );
            dates.not( this ).datepicker( "option", option, date );
        }
    });
});
</script>

Ovako bi minimalni dan za unos bio današnji dan, a maksimalni za 4 meseca. Nadam se da si to nameravao (ako nije onda pogledaj opis opcija minDate i maxDate).
Naravno, podatke moraš da iskontrolišeš i na serverskoj strani.

Izvinjavam se zbog nečitkog koda, nešto je zabagovalo prilikom copy/paste.

Ovo mi ne rešava problem. Prvi unos može biti proizvoljan, a drugi unos može biti najviše 4 meseca od prvog unosa (ne od današnjeg datuma, kako se ovim kodom dobija). Ovakvo rešenje "prolazi" samo u slučaju da je prvi unos uvek današnji datum, ali u realnosti neće biti tako. Proveo sam nekoliko sati pokušavajući uz pomoć te jQuery dokumentacije, ali nisam uspeo...

[Remedy]

Šta ima lepše od javascripta uz jutarnju kafu

<script>
$(function() {
	var dates = $( "#from, #to" ).datepicker({
		/* Dan koji je odabran po defaultu, +1d je sutrasnji datum, 0d
		je danasnji... */
		defaultDate: "+1d",
		changeMonth: true,
		numberOfMonths: 3,
		onSelect: function( selectedDate ) {
			/* customRange - nova promenljiva za opseg u mesecima,
			4 posto rece 4 meseca */
			var customRange = 4,
				/* ako je aktivno from polje, vraca maxDate, da bi to 
				postavili kao opciju za drugo input polje, ova linija je
				IZMENJENA (izmenjeno je minDate i maxDate u
				odnosu na originalnu skriptu) */
				option = this.id == "from" ? "maxDate" : "minDate",
				instance = $( this ).data( "datepicker" ),
				date = $.datepicker.parseDate(
					instance.settings.dateFormat ||
					$.datepicker._defaults.dateFormat,
					selectedDate, instance.settings );
			/* ako je kao option postavljeno maxDate, onda odabrani
			datum povecavamo za 4 meseca, u protivnom je option
			minDate, pa datum smanjujemo za 4 (npr ako je prvo
			popunjeno #to input polje, onda #from ne moze biti ranije
			od 4 meseca pre)  */
			if(option == "maxDate")
			{
				date.setMonth(date.getMonth() + customRange);
			}
			else
			{
				date.setMonth(date.getMonth() - customRange);
			}
			/* postavljanje opcije minDate ili maxDate za drugo input polje */
			dates.not( this ).datepicker( "option", option, date );
		}
	});
});
</script>

Dakle prvi datum je proizvoljan, bez obzira da li se prvo unosi #from ili #to. Ako je prvo uneto #from, #to ne može biti kasnije od +4 meseca, ako je prvo uneto #to, onda #from ne može biti ranije od -4 meseca. Trebalo bi da radi, ako ne, popravljaćemo popodne

[dusandevic]

Radi!

Hvala ti dobri čoveče!

[Remedy]

Dobro je ako radi kako si zamislio, ali ima jedna stvar koju bi trebalo popraviti. Poslednja linija koda

dates.not( this ).datepicker( "option", option, date );

stvara beskonačni loop, ako koristiš npr Web developer toolbar na Firefox-u videćeš da izbacuje "too much recursion". Na Jquery UI su to nekako prevideli. Tako da evo izmenjene skripte, bez tog problema, malo kraće napisan onaj if/else deo, i dodatak koji uklanja ograničenje za input polje ako korisnik ručno obriše prethodno unetu vrednost u drugo input polje (to je onaj deo "beforeShow"). Kad se već zezamo, bar da radi kako treba.

<script>
$(function() {
	var dates = $( "#from, #to" ).datepicker({
		defaultDate: "+1d",
		changeMonth: true,
		numberOfMonths: 3,
		/* Ovo uklanja ogranicenje, ako korisnik rucno obrise prethodno unetu vrednost u drugom polju */
		beforeShow: function(inputField){
			if(!dates.not(this).attr("value"))
			{
				$(this).data("datepicker").settings["maxDate"] = null;
				$(this).data("datepicker").settings["minDate"] = null;
			}
		},
		onSelect: function( selectedDate ) {
			/* customRange - nova promenljiva za opseg u mesecima */
			var customRange = 4,
				/* ako je aktivno from polje, vraca maxDate, da bi to postavili kao opciju za drugo input polje, ova linija je IZMENJENA (izmenjeno je minDate i maxDate u odnosu na originalnu skriptu) */
				option = this.id == "from" ? "maxDate" : "minDate",
				instance = $( this ).data( "datepicker" ),
				date = $.datepicker.parseDate(
					instance.settings.dateFormat ||
					$.datepicker._defaults.dateFormat,
					selectedDate, instance.settings );
			/* ako kao option nije postavljeno maxDate, datum smanjujemo za 4 */
			customRange = option == "maxDate" ? customRange : -customRange;
			date.setMonth(date.getMonth() + customRange);
			/* postavljanje opcije minDate ili maxDate za drugo input polje */
			dates.not(this).data("datepicker").settings[option] = date;
		}
	});
});
</script>