jquery UI Datepicker

Κώδικας, πληροφορίες, ερωτήσεις και απαντήσεις σχετικές με την JavaScript.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
mpempe
Δημοσιεύσεις: 156
Εγγραφή: 23 Ιουν 2003 02:48
Τοποθεσία: peloponisos

jquery UI Datepicker

Δημοσίευση από mpempe » 05 Ιουν 2012 17:17

Γειά σας

Προσπαθώ να φτιάξω μια φόρμα με δύο πεδία (in και out) που ο χρήστης να μπορεί να βάζει 2 ημερομηνίες.
Του επιτρέπω να μπορεί να επιλέγει μόνο απο Κυριακές και όχι απο άλλες μέρες (έτσι είναι το concept)

Αυτό που δε μπορεσα να βρώ είναι αν για παράδειγμα επιλέξω
ΙΝ 1/7/2012
να μην ειναι ενεργοποιημένες οι προηγούμενες ημερομηνίες στο OUT


DEMO http://jsfiddle.net/WWVEg/56/

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

jquery UI Datepicker

Δημοσίευση από alou » 05 Ιουν 2012 18:14

Κάπως έτσι φαντάζομαι αλλά θα πρέπει να δεις τα date format για να είναι σωστό το αποτέλεσμα, είναι διαφορετικό αυτό που χρησιμοποιείς στη μεταβλητή unavailable dates και στο datepicker

Κώδικας: Επιλογή όλων


$('#OutDate').focus(function() {
     var selectedDay = $('input#InDate').val();
     unavailableDates.push(selectedDay);
     if (selectedDay =="" || selectedDay =="null") { alert("first select in day"); }
     else {
            $('#OutDate').datepicker({
            beforeShowDay: unavailable,
            minDate: 0
            });
           }
    })


mpempe
Δημοσιεύσεις: 156
Εγγραφή: 23 Ιουν 2003 02:48
Τοποθεσία: peloponisos

jquery UI Datepicker

Δημοσίευση από mpempe » 05 Ιουν 2012 18:28

ΟΚ βρήκα τη λύση
Demo http://jsfiddle.net/WWVEg/59/

mpempe
Δημοσιεύσεις: 156
Εγγραφή: 23 Ιουν 2003 02:48
Τοποθεσία: peloponisos

jquery UI Datepicker

Δημοσίευση από mpempe » 05 Ιουν 2012 19:33

alou
Δίκιο είχες με το date format
στο παρακάτω demo προφανώς είναι το default(mm/dd/yy) και πέζει σωστά
http://jsfiddle.net/WWVEg/59/

Όταν ορίζω διαφορετικό date format (dd/mm/yy) δεν λειτουργεί σωστά το script
http://jsfiddle.net/WWVEg/61/

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

jquery UI Datepicker

Δημοσίευση από alou » 05 Ιουν 2012 22:51

Πέρα από αυτό, ο τρόπος που σου έγραψα τσεκάρει να έχεις βάλει πρώτα τιμή στο IN αλλιώς δεν μπορείς να αποκλείσεις κάτι σίγουρα.

mpempe
Δημοσιεύσεις: 156
Εγγραφή: 23 Ιουν 2003 02:48
Τοποθεσία: peloponisos

jquery UI Datepicker

Δημοσίευση από mpempe » 06 Ιουν 2012 00:36

alou
τον δοκίμασα τον κώδικα που έγραψες κι αν κατάλαβα καλά κάνει έλεγχο στο OUT μήπως είναι άδειο, δε μου λειτουργεί όμως
κοίτα εδώ
http://jsfiddle.net/WWVEg/65/

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

jquery UI Datepicker

Δημοσίευση από alou » 06 Ιουν 2012 02:18

Λογικό αφού το έχεις αλλάξει και δεν υπάρχει η unavailableDates που χρησιμοποιούσες πριν, πλέον πρέπει να γίνει διαφορετικά.

http://jsfiddle.net/WWVEg/81/

Κώδικας: Επιλογή όλων

$checkdate = "";
function checkAll(mydate){
var day = mydate.getDay();
var $return=true;
var $returnclass ="available";
var $badDate = $('input#InDate').val();
$checkdate = $.datepicker.formatDate('dd-mm-yy', mydate);
       if( ($checkdate == $badDate ) || ( day >= 1 ) )
          {
        $return = false;
        $returnclass= "unavailable";
        }

return [$return,$returnclass];
}


$("#InDate").datepicker({
    minDate: +0,
    dateFormat: 'dd-mm-yy',
    beforeShowDay: checkAll,
     onSelect: function(dateText, inst){
               var the_date = new Date(dateText);
               $("#OutDate").datepicker('option', 'minDate', the_date);
     }

});

//var startDate = $("#InDate").val();
//var the_date = new Date(startDate);


$('#OutDate').focus(function() {
     if ($checkdate == "" || $checkdate == "null") { alert("first select in day"); }
     else {
            $("#OutDate").datepicker({
            dateFormat: 'dd-mm-yy',
            //minDate: the_date,
             beforeShowDay: checkAll
             });
           }
    })
edit: τώρα κατάλαβα ότι χρειάζεται 1 focus για να καλέσεις το datepicker (οπότε δεν θα εμφανιστεί στο πρώτο) και ένα δεύτερεο για να εμφανιστεί κανονικά, οπότε ξεχνάμε το focus(function και κάνουμε δυο διαφορετικά function, ένα για το in και ένα για το out αν θες αυτή τη λειτουργία.

Οπότε αυτό δουλεύει ~ μια χαρά - έβαλα ένα flag για να μην κάνει loop το alert.
http://jsfiddle.net/CBMZf/30/

Κώδικας: Επιλογή όλων

$checkdate = "";
var flag = false;
function OnlySunday(date) {
      flag= false;
      var day = date.getDay();
      return [
          &#40;day < 1 &#41;,
          ''
      &#93;;
    
&#125;;



function checkAll&#40;mydate&#41;&#123;
if &#40; !flag &#41; &#123;
    $indate = $&#40;'input#InDate'&#41;.val&#40;&#41;;
    if &#40;$indate == "" || $indate == "null"&#41; &#123;
        alert&#40;"first select in day"&#41;;
        flag = true;
        
    &#125;
    else &#123;   

        var day = mydate.getDay&#40;&#41;;
        var $return=true;
        var $returnclass ="available";
        var $badDate = $&#40;'input#InDate'&#41;.val&#40;&#41;;
        $checkdate = $.datepicker.formatDate&#40;'dd-mm-yy', mydate&#41;;
           if&#40; &#40;$checkdate == $badDate &#41; || &#40; day >= 1 &#41; &#41; &#123;
                $return = false;
                $returnclass= "unavailable";
            &#125;

    return &#91;$return,$returnclass&#93;;
    &#125;
&#125;
&#125;

$&#40;"#InDate"&#41;.datepicker&#40;&#123;
    minDate&#58; +0,
    dateFormat&#58; 'dd-mm-yy',
    beforeShowDay&#58; OnlySunday,
     onSelect&#58; function&#40;dateText, inst&#41;&#123;
               var the_date = new Date&#40;dateText&#41;;
               $&#40;"#OutDate"&#41;.datepicker&#40;'option', 'minDate', the_date&#41;;
     &#125;

&#125;&#41;;

//var startDate = $&#40;"#InDate"&#41;.val&#40;&#41;;
//var the_date = new Date&#40;startDate&#41;;

  $&#40;"#OutDate"&#41;.datepicker&#40;&#123;
   dateFormat&#58; 'dd-mm-yy',
   //minDate&#58; the_date,
   beforeShowDay&#58; checkAll
   &#125;&#41;;
        


alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

jquery UI Datepicker

Δημοσίευση από alou » 06 Ιουν 2012 03:51

Μπερδεύτηκα με τα copy paste και τα edit είναι και αργά :/

Κώδικας: Επιλογή όλων

$checkdate = "";
var flag = false;
function OnlySunday&#40;date&#41; &#123;
      flag= false;
      var day = date.getDay&#40;&#41;;
      return &#91;
          &#40;day < 1 &#41;,
          ''
      &#93;;
    
&#125;;



function checkAll&#40;mydate&#41;&#123;
if &#40; !flag &#41; &#123;
    $indate = $&#40;'input#InDate'&#41;.val&#40;&#41;;
    if &#40;$indate == "" || $indate == "null"&#41; &#123;
        alert&#40;"first select in day"&#41;;
        flag = true;
        
    &#125;
    else &#123;   

        var day = mydate.getDay&#40;&#41;;
        var $return=true;
        var $returnclass ="available";
        var $badDate = $&#40;'input#InDate'&#41;.val&#40;&#41;;
        $checkdate = $.datepicker.formatDate&#40;'dd-mm-yy', mydate&#41;;
           if&#40; &#40;$checkdate == $badDate &#41; || &#40; day >= 1 &#41; &#41; &#123;
                $return = false;
                $returnclass= "unavailable";
            &#125;

    return &#91;$return,$returnclass&#93;;
    &#125;
&#125;
&#125;

$&#40;'#OutDate'&#41;.blur&#40;function&#40;&#41; &#123;
    flag = false;
&#125;&#41;

$&#40;"#InDate"&#41;.datepicker&#40;&#123;
    minDate&#58; +0,
    dateFormat&#58; 'dd-mm-yy',
    beforeShowDay&#58; OnlySunday,
     onSelect&#58; function&#40;dateText, inst&#41;&#123;
               var the_date = new Date&#40;dateText&#41;;
               $&#40;"#OutDate"&#41;.datepicker&#40;'option', 'minDate', the_date&#41;;
     &#125;

&#125;&#41;;


  $&#40;"#OutDate"&#41;.datepicker&#40;&#123;
   dateFormat&#58; 'dd-mm-yy',
   //minDate&#58; the_date,
   beforeShowDay&#58; checkAll
   &#125;&#41;;
        

mpempe
Δημοσιεύσεις: 156
Εγγραφή: 23 Ιουν 2003 02:48
Τοποθεσία: peloponisos

jquery UI Datepicker

Δημοσίευση από mpempe » 06 Ιουν 2012 10:40

alou ευχαριστώ πολύ για τη βοήθεια
στο
http://jsfiddle.net/CBMZf/30/
λύνουμε το πρόβλημα του alert και του format της ημερομηνίας αλλα δε λειτουργεί όπως θέλω το OUT

Επειδη θα μπει σε φόρμα κλεισίματος δωματίων
Ο χρήστης κάνει κλικ στο ΙΝ πάει στον Αυγουστο και επιλέγει 12-8-2012
Κάνει κλικ στο OUT και τον γυρίζει στον Ιούνιο δίνοντας του τη δυνατότητα να επιλέξει μια προγενέστερη ημερομηνία κατι που είναι λάθος.

Κάνοντας comment τα 2 dateFormat το παραπάνω ζήτημα λύνεται και στο OUT μας επιστρέφει στον Αύγουστο κρύβοντας όλα τα προγενέστερα
http://jsfiddle.net/CBMZf/35/

Προφανώς αυτό το date format δημιουργεί πρόβλημα. Έχω την εντύπωση πως πρέπει να δεχτώ το format mm-dd-yy.

Μπορούμε να απενεργοποιήσουμε στο OUT την επιλογή του ΙΝ?
Δηλαδή αν στο ΙΝ επιλέξει 12 Αυγούστου στο OUT το 12 Αυγούστου και όλα τα προγενέστερα να είναι απενεργοποιημένα?

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

jquery UI Datepicker

Δημοσίευση από alou » 06 Ιουν 2012 11:39

Ένα ένα μας τα λες :D

Όπως δέχεσαι τιμή day < 1, στο function που τρέχει για το out θα βάλεις μια επιπλέον παράμετρο στο if ώστε να τσεκάρει και τον μήνα σε σχέση με τον μήνα που επιλέχθηκε στο IN.

όπως
var day = mydate.getDay();
θα χρησιμοποιήσεις
var month = mydate.getMonth();

και θα το συγκρίνεις με τον μήνα που επιλέχθηκε στο IN

Πιθανώς θα μπορούσε να ήταν και απλούστερο, δεν μπορώ να σκεφτώ κάτι άλλο όμως τώρα.

Δούλεψέ το λίγο κάπως έτσι και βλέπουμε.

edit: άστο τόκανα, ήθελε καναδυό παραπάνω πράγματα από αυτά που σου είπα
http://jsfiddle.net/UBgRx/10/

Κώδικας: Επιλογή όλων

$checkdate = "";
var flag = false;
function OnlySunday&#40;date&#41; &#123;
      flag= false;
      var day = date.getDay&#40;&#41;;
      return &#91;
          &#40;day < 1 &#41;,
          ''
      &#93;;
    
&#125;;



function checkAll&#40;mydate&#41;&#123;
if &#40; !flag &#41; &#123;
    $indate = $&#40;'input#InDate'&#41;.val&#40;&#41;;
    if &#40;$indate == "" || $indate == "null"&#41; &#123;
        alert&#40;"first select in day"&#41;;
        flag = true;
        
    &#125;
    else &#123;   

        var day = mydate.getDay&#40;&#41;;
        var month = mydate.getMonth&#40;&#41; + 1;
        var date = mydate.getDate&#40;&#41; + 1;
        var $return=true;
        var $returnclass ="available";
        var $badDate = $&#40;'input#InDate'&#41;.val&#40;&#41;;
        var inMonth = $badDate.split&#40;'-'&#41;&#91;1&#93;;
        var inDay = $badDate.split&#40;'-'&#41;&#91;0&#93;;
        //alert&#40;inDay + ' ' + day&#41;;
        $checkdate = $.datepicker.formatDate&#40;'dd-mm-yy', mydate&#41;;
           if&#40; &#40;$checkdate == $badDate &#41; || &#40; day >= 1 &#41; || &#40;month < inMonth&#41; || &#40; &#40;month = inMonth&#41; &&  &#40;date < inDay&#41; &#41; &#41; &#123;
                $return = false;
                $returnclass= "unavailable";
            &#125;

    return &#91;$return,$returnclass&#93;;
    &#125;
&#125;
&#125;

$&#40;"#InDate"&#41;.datepicker&#40;&#123;
    minDate&#58; +0,
    dateFormat&#58; 'dd-mm-yy',
    beforeShowDay&#58; OnlySunday,
     onSelect&#58; function&#40;dateText, inst&#41;&#123;
               var the_date = new Date&#40;dateText&#41;;
               $&#40;"#OutDate"&#41;.datepicker&#40;'option', 'minDate', the_date&#41;;
     &#125;

&#125;&#41;;

//var startDate = $&#40;"#InDate"&#41;.val&#40;&#41;;
//var the_date = new Date&#40;startDate&#41;;

  $&#40;"#OutDate"&#41;.datepicker&#40;&#123;
   dateFormat&#58; 'dd-mm-yy',
   //minDate&#58; the_date,
   beforeShowDay&#58; checkAll
   &#125;&#41;;
        


mpempe
Δημοσιεύσεις: 156
Εγγραφή: 23 Ιουν 2003 02:48
Τοποθεσία: peloponisos

jquery UI Datepicker

Δημοσίευση από mpempe » 06 Ιουν 2012 15:31

ευχαριστώ alou για τη βοήθεια
όλα πολύ καλά, εκτος απο 1 :oops:

Να το πω? :oops:

ΠΧ
Στο ΙΝ κάνουμε κλικ στις 12 Αυγούστου.
Ολα ΟΚ

Στο OUT μας στέλνει στον Δεκέμβριο , πράγμα που σημαίνει πως το 12-8-2012 το είδε σαν 8-12-2012, καθώς επίσης αν προχωρήσεις μπροστά στους μήνες θα δεις πως λείπουν ημέρες

Άσε λίγο να το ψάξω στο google μήπως βρω κάτι πιο κοντά σε αυτό που θέλω, κι χρειαστεί κάποια παρέμβαση θα σου πω.

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6230
Εγγραφή: 30 Νοέμ 2004 03:09

jquery UI Datepicker

Δημοσίευση από fafos » 06 Ιουν 2012 17:18

Κώδικας: Επιλογή όλων

$&#40;function &#40;&#41; &#123;
	
	function OnlySunday&#40;date&#41; &#123;
		var day = date.getDay&#40;&#41;;
		return &#91;
			&#40;day < 1&#41;,
			''
		&#93;;
	&#125;;
	var dates = $&#40;"#InDate, #OutDate"&#41;.datepicker&#40;&#123;
			
			defaultDate &#58; "+1w",
			changeMonth &#58; true,
			numberOfMonths &#58; 2,
			minDate &#58; +0,
			showAnim &#58; 'drop',
			beforeShowDay &#58; OnlySunday,
			dateFormat &#58; 'dd-mm-yy',
			firstDay &#58; 0,
			isRTL &#58; false,
			showMonthAfterYear &#58; false,
			yearSuffix &#58; '',
			onSelect &#58; function &#40;selectedDate&#41; &#123;
				var option = this.id == "InDate" ? "minDate" &#58; "maxDate",
				instance = $&#40;this&#41;.data&#40;"datepicker"&#41;;
				date = $.datepicker.parseDate&#40;
						instance.settings.dateFormat ||
						$.datepicker._defaults.dateFormat,
						selectedDate, instance.settings&#41;;
				dates.not&#40;this&#41;.datepicker&#40;"option", option, date&#41;;
			&#125;
		&#125;&#41;;
&#125;&#41;;
http://jsfiddle.net/WWVEg/93/
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

mpempe
Δημοσιεύσεις: 156
Εγγραφή: 23 Ιουν 2003 02:48
Τοποθεσία: peloponisos

jquery UI Datepicker

Δημοσίευση από mpempe » 06 Ιουν 2012 17:42

Υπέροχα
Ευχαριστώ πολύ fafos

Με καλύπτει απόλυτα. Μια βελτίωση (δε ξέρω αν μπορεί να γίνει)
Αν στο ΙΝ επιλέξω 12 Αυγούστου
στο OUT το 12 Αυγούστου να είναι απενεργοποιημένο και να αρχίζει από 19 Αυγούστου.
Έτσι θα ήταν το τέλειο.

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

jquery UI Datepicker

Δημοσίευση από alou » 06 Ιουν 2012 18:58

mpempe έγραψε:ευχαριστώ alou για τη βοήθεια
όλα πολύ καλά, εκτος απο 1 :oops:

Να το πω? :oops:

ΠΧ
Στο ΙΝ κάνουμε κλικ στις 12 Αυγούστου.
Ολα ΟΚ

Στο OUT μας στέλνει στον Δεκέμβριο , πράγμα που σημαίνει πως το 12-8-2012 το είδε σαν 8-12-2012, καθώς επίσης αν προχωρήσεις μπροστά στους μήνες θα δεις πως λείπουν ημέρες
είχα ένα = αντί για == αν το δεις τώρα είναι ΟΚ, φυσικά ο τρόπος του fafos είναι πιο σωστός :D

http://jsfiddle.net/UBgRx/13/

mpempe
Δημοσιεύσεις: 156
Εγγραφή: 23 Ιουν 2003 02:48
Τοποθεσία: peloponisos

jquery UI Datepicker

Δημοσίευση από mpempe » 06 Ιουν 2012 22:31

alou έγραψε:είχα ένα = αντί για == αν το δεις τώρα είναι ΟΚ
alou σίγουρα?
Εγώ βλέπω την ίδια συμπεριφορά
δες εδώ
Εικόνα

Εικόνα

Εικόνα

Εικόνα

Εικόνα

Απάντηση

Επιστροφή στο “JavaScript και Frameworks”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 1 επισκέπτης