Twitter Bootstrap Datepicker

Twitter Bootstrap è un framework Javascript e CSS leggero e pieno di funzionalità interssanti.

Tra queste, però, gli manca un datepicker.

Lo possiamo integrare però attraverso un plugin esterno scaricabile da qua.

Una volta scaricati entrambi, aggiungiamoli alla pagina:

<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" media="screen" />
<link rel="stylesheet" href="bootstrap/css/datepicker.css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="js/script.js"></script>

Questi sono i JS e i CSS che ci servono; script.js è dove metteremo il codice per impostare il datepicker.

Android DatePicker

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.

jQuery UI Datepicker: non visualizzare le date antecedenti a oggi

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 Datepicker

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: