Sono passati anni , ormai, ma jQuery UI Datepicker continua ad essere il mio calendario preferito.

Sia per facilità di implementazione, che per la possibilità di personalizzazione.

Oggi vediamo come possiamo impostare il datepicker per visualizzare solo il mese e l'anno, omettendo il giorno.

Può essere utile nel caso si impostino periodi di tempo per mese / anno, tipo un budget.

Prima di tutto, impostiamo una regola CSS per nascondere il calendario:

.ui-datepicker-calendar { display: none; }

Provatela per vedere l'effetto.

jQuery Mobile lo conosciamo, è un ottimo framework basato su jQuery indirizzato al mobile.

Tra i componenti ne manca uno essenziale, a mio parere: un datepicker.

In giro ci sono vari datepicker indirizzati al mobile, e tra questi io personalmente ho scelto DateBox.

Le opzioni, come potete vedere, sono tantissime e l'aspetto grafico in perfetto stile jQuery Mobile.

I DatePicker sono dei componenti molto comodi per rappresentare le date, e li possiamo ormai trovare su qualsiasi software Web, Desktop o Mobile che sia.

Oggi vediamo come usare questo componente in Android.

Prima di tutto aggiuntetelo al lyout della vostra Activity:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    style="@style/app_theme"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <DatePicker
        android:id="@+id/date_picker"
        android:layout_width="fill_parent"
        android:layout_height="110dp"
        android:calendarViewShown="false" />

     <Button
            android:id="@+id/btn_up"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/btn" />

</LinearLayout>

Controllate quali opzioni fanno per voi ovviamente.

Ho messo anche un Button per impostarci sopra un evento di lettura della data scelta.

Poi nella nostra Avtivity:

public class MyActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.add_er);
        DatePicker datePicker = (DatePicker) findViewById(R.id.date_picker);
        Button btnLogin = (Button) findViewById(R.id.btn);
        btnLogin.setOnClickListener(new View.OnClickListener() {

            public void onClick(View v) {
                String date = DateFormat.format("yyyy-MM-dd", datePicker.getCalendarView().getDate()).toString();
                System.out.println(date);
            }
        });
    }

}

Al click sul Button trasformo la data scelta in stringa e la formatto come voglio usando un oggetto DateFormat.

E torniamo a parlare di jQuery UI Datepicker, il componente calendario di jQuery UI.

In pratica, in attesa di HTML 5 come standard, uso sempre quello come calendario ormai.

In un sito che sto sviluppando mi è stato richiesto di non visualizzare / oscurare i giorni antecedenti a quello odierno.

Questo per evitare che si possano fare ordinazioni a una data "inutile".

Per ottenere questo dobbiamo far ricorso all'opzione minDate e all'oogetto Javascript Date().

jQuery UI è la libreria jQuery per la gestione della User Interface (UI).

Ha molti componenti interessanti, e di uno ho già parlato.

Oggi invece affrontiamo il Datepicker, che ci aiuta a inserire la data.

Questo può essere molto utile per il formato giusto, che deve essere allineato a quello del db dove salviamo la data.

Nel mio caso uso un db MySQL con un campo Date che ha questa forma: yyyy-mm-dd.

Prima di tutto dobbiamo scaricare jQuery e jQuery UI.

Sul secondo possiamo anche sceglliere il colore della grafica e verrà scaricato anche un CSS.

Poi dobbiamo richiamare le librerie e il CSS:

<link rel="stylesheet" href="../template/css/jquery-ui-1.8.14.custom.css" type="text/css" />
<script type="text/javascript" src="lib/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="lib/jquery-ui-1.8.14.custom.min.js"></script>

Una volta fatto questo la pagina dovrà sarà simile a questa: