none
Datepicker di jQuery UI RRS feed

  • Domanda

  • Ciao a tutti,

    premesso che ho un'esperienza uguale a zero, sto cercando di imparare ad utilizzare Visual Studio con codice Visual Basic. La versione che ho installato è 2012

    Ho creato delle pagine Web Form dove ci sono textbox relativi a date

    Cercando in internet ho trovato che viene utilizzato Datepicker  di jQuery UI e il box data viene creato dal foglio HTML

    Non sono riuscito a capire come fare per partire da una Web Form

    Posso chiedere se qualcuno mi può aiutare ( e considerato che sono a zero mi servirebbe un …. grosso
    aiuto

    Allego la Web Form dove vorrei inserire le date (DATA1 e DATA2

    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm1.aspx.vb" Inherits="Prova.WebForm1" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
        
            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            <asp:TextBox ID="DATA1" runat="server"></asp:TextBox>
            <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
            <asp:TextBox ID="DATA2" runat="server"></asp:TextBox>
        
        </div>
        </form>
    </body>
    </html>
    Grazie e buona giornata

    • Modificato Bruno1953 venerdì 5 febbraio 2016 11:52
    venerdì 5 febbraio 2016 11:51

Risposte

  • Buon pomeriggio Bruno e benvenuto nel forum ASP.NET

    Ti allego la tua stessa pagina con un piccolo esempio di come associare alle tue due TextBox un controllo DatePicker di Jquery.
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Datepicker</title>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
      <script src="//code.jquery.com/jquery-1.10.2.js"></script>
      <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
      <script>
          $(function () {
              $("#<%=DATA1.ClientID%>").datepicker();
              $("#<%=DATA2.ClientID%>").datepicker();
          });
      </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            <asp:TextBox ID="DATA1" runat="server"></asp:TextBox>
            <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
            <asp:TextBox ID="DATA2" runat="server"></asp:TextBox>
        </div>
        </form>
    </body>
    </html>
    Ciao

    Paolo Pranzo

    • Contrassegnato come risposta Bruno1953 sabato 6 febbraio 2016 16:41
    venerdì 5 febbraio 2016 13:54

Tutte le risposte

  • Buon pomeriggio Bruno e benvenuto nel forum ASP.NET

    Ti allego la tua stessa pagina con un piccolo esempio di come associare alle tue due TextBox un controllo DatePicker di Jquery.
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Datepicker</title>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
      <script src="//code.jquery.com/jquery-1.10.2.js"></script>
      <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
      <script>
          $(function () {
              $("#<%=DATA1.ClientID%>").datepicker();
              $("#<%=DATA2.ClientID%>").datepicker();
          });
      </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            <asp:TextBox ID="DATA1" runat="server"></asp:TextBox>
            <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
            <asp:TextBox ID="DATA2" runat="server"></asp:TextBox>
        </div>
        </form>
    </body>
    </html>
    Ciao

    Paolo Pranzo

    • Contrassegnato come risposta Bruno1953 sabato 6 febbraio 2016 16:41
    venerdì 5 febbraio 2016 13:54
  • Ciao Paolo,

    Innanzitutto grazie.

    Vorrei chiederti un'ultima cosa:

    Ho inserito 2 righe nell'ID della TextBox per mettere la data gg/mm/aa:

              $("#<%=DATA1.ClientID%>").datepicker({
                  "dateFormat": "dd/mm/yy",
                  "showAnim": "slideDown"
              });

    e ho  importato il foglio di stile e i 2 script.

    Per ridurre la dimensione del calendario, ho modificato il foglio di stile mettendo il font-size di .ui-widget a 11px.

    il modulo (anche prima della modifica) segnala per 5 righe questo avviso:

    Convalida (CSS 3.0): "touch-action" non è un nome proprietà CSS noto

    sulla riga          touch-action: none

    Il tutto funziona, ma è solo per capire.

    Grazie angora e buona giornata

    Ciao

    • Modificato Bruno1953 sabato 6 febbraio 2016 09:37
    sabato 6 febbraio 2016 09:37
  • Questo avviso ti viene segnalato tramite il Target Schema for Validation del tuo IDE.
    Stai utilizzando lo schema HTML5?
    Eventualmente installati la versione Community 2015, è un IDE più aggiornato.

    Ciao


    Paolo Pranzo

    sabato 6 febbraio 2016 13:51
  • OK

    Grazie ancora

    Buona serata

    sabato 6 febbraio 2016 16:41