2013-09-05 10 views
7

Używamy jquery UI 1.8.23 w moim miejscu pracy.Datacicker jQuery UI - próba przechwytywania zdarzenia kliknięcia od daty kliknięcia

Jak mogę przechwycić datę klikniętą w datepicker, więc mogę sformatować bieżącą datę na sygnaturkę i przekazać tę wartość do pola ukrytego formularza?

Oto niektóre kodu Próbowałem dostać pracę:

$('.ui-state-default').live('click', function(){ 
    console.log('date clicked'); 
    var currentdate = $(this).text(); 
    var d = currentdate; 
    var m = monthFormat($('.ui-datepicker-month').text()); 
    var y = $('.ui-datepicker-year').text(); 
    $('a.ui-state-default').removeClass('ui-state-highlight'); 
    $(this).addClass('ui-state-highlight'); 

    if (currentdate.length < 2) { 
    d = "0" + currentdate; 
    } 
    var datestamp = y + "-" + m + "-" + d; 
    console.log(datestamp); 
    $('#dateHidden').val(datestamp); 
}); 

Dzięki za patrząc na mojego kodu I wdzięczni za każdą pomoc chłopaki może zaoferować.

+2

Dlaczego nie używasz onselect wydarzenie? http://api.jqueryui.com/datepicker/#option-onSelect – j08691

Odpowiedz

12

Nie musisz nic robić, aby sformatować datę. Widget DatePicker robi to za Ciebie. Wystarczy użyć altField i altFormat właściwości:

$("#myDatePicker").datepicker({ 
    // The hidden field to receive the date 
    altField: "#dateHidden", 
    // The format you want 
    altFormat: "yy-mm-dd", 
    // The format the user actually sees 
    dateFormat: "dd/mm/yy", 
    onSelect: function (date) { 
     // Your CSS changes, just in case you still need them 
     $('a.ui-state-default').removeClass('ui-state-highlight'); 
     $(this).addClass('ui-state-highlight'); 
    } 
}); 

Dokumentacja:

http://api.jqueryui.com/datepicker/#option-altField

http://api.jqueryui.com/datepicker/#option-altFormat

Demonstracja:

http://jsfiddle.net/sFBn2/10/

+0

i jak wyprowadza wartość do ukrytego pola? – bitmapshades

+1

Robi to automatycznie. Po to jest 'altField'. – melancia

+0

OK, ale jak sprawdzić, czy wartość jest przekazywana do ukrytego pola, jeśli narzędzia programistyczne Chrome nie aktualizują się podczas zdarzenia onSelect? – bitmapshades

0

Twój datepicker to słucha.

patrz onSelect() function

wykonana kiedy wybrany datepicker. Funkcja przyjmuje wybraną datę jako tekst, a instancja datepika jako parametry. odnosi się to do powiązanego pola wejściowego.

$('.date-pick').datepicker({ 
    onSelect: function(date) { 
     //play with date here 
    }, 
---- 
---- 
--- 
1

jQuery Datepicker udostępnia opcję formatowania . Dlaczego tego nie wykorzystasz?

$('element').datepicker({ dateFormat: 'dd-mm-yy' }); 

Również nie potrzebujesz osobnej metody przechwytywania zdarzenia kliknięcia. Ci domyślna metoda onSelect

$('input').datepicker({ 
dateFormat: 'yy-mm-dd', 
    onSelect: function (date) { 
    //defined your own method here 
    alert(date); 
    } 
}) 

Sprawdź to JSFiddle

+0

Czy mogę znać powód do zgubienia? – Praveen

+0

wszystko, co trzeba, to ustawić atrybut class = "hasDatepicker" na ukrytym polu. (Ja sam nie głosowałem). – bitmapshades

+0

@bitmapshades Próbujesz przypisać wartość do ukrytego pola. Nie mogłem dostać tego, co próbujesz dodać do klasy datepicker? Popraw mnie jeśli się mylę. – Praveen

1
$('#calendar').datepicker({ 
     inline: true, 
     firstDay: 1, 
     changeMonth: false, 
     changeYear: true, 
     showOtherMonths: true, 
     showMonthAfterYear: false, 
     yearRange: "2015:2025",  
     dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'], 
     dateFormat: "yy-mm-dd", 
     onSelect: function (date) { 
      alert(date); 
     } 
    }); 
+0

Powinieneś dodać opis rozwiązania. –

Powiązane problemy