venerdì 4 gennaio 2013

Utilizzo personalizzato di jQuery UI DatePicker in ambiente .Net

Utilizzo personalizzato di jQuery UI DatePicker in ambiente .Net

Se in una form sono presenti più oggetti DatePicker è possibile associare a ciascuno diverse proprietà attribuendo diverse funzioni.
Con questo esempio rendo selezionabili nel secondo DatePicker solamente: tutti i martedì del mese (corrisponde il numero 2), dal 25 di ogni mese fino a fine mese, i primi 5 giorni del mese successivo.
Di seguito i due oggetti TextBox/datePicker e il codice javascript:
<asp:TextBox ID="txt1" runat="server" CssClass="datePicker"> </asp:TextBox>
<asp:TextBox ID="txt2" runat="server" CssClass="datePicker_custom"> </asp:TextBox>

<script type="text/javascript">

function initDatepicker() {
    var myPath = getBaseURL() + "img/icon-calendar.gif";
    var myParam = 'both';
    var date = new Date();
    var dayMonth = 25;

    $(function() {
        $(".datepicker").datepicker({
            showButtonPanel: true,
            buttonImage: myPath,
            buttonImageOnly: true,
            showOn: myParam
        });
    });

    $(function() {
        $(".datePicker_custom").datepicker({
            showButtonPanel: true,
            buttonImage: myPath,
            buttonImageOnly: true,
            showOn: myParam,

            beforeShowDay: function(date) {
                var dayEnabled = date.getDay();
                var dayRangeEnabled = date.getDate();

                if (dayEnabled == 2 || dayRangeEnabled > dayMonth || dayRangeEnabled < 6) {
                    return { 0: true }
                } else {
                    return { 0: false }
                }
            }
        });
    });
}

</script>