Visualizzazione dei risultati da 1 a 5 su 5
  1. #1
    Utente di HTML.it L'avatar di allin81
    Registrato dal
    Mar 2011
    Messaggi
    1,875

    Bootstrap e range tra 2 date in calendario

    Buonasera a tutti
    ho un piccolo problema, sto inserendo un calendario di bootstrap che mostra un range tra 2 date (arrivo e partenza).

    Se lo scrivo cosi' non ho problemi:
    codice:
    <div class="form-group table-bordered">
      <label for="arrivo" class="col-sm-3 control-label">Arrivo</label>
        <div class="input-daterange col-sm-6" id="datepicker">
            <input type="text" class="form-control" name="start" required/>
        <span class="add-on" style="vertical-align: top;height:20px">Partenza</span>
            <input type="text" class="form-control" name="end" required/>
        </div>
      </div>
    La cosa brutta e' che il testo "Partenza" non me lo da sotto ad Arrivo ma spostato come si evince dalo screenshot che allego

    http://snag.gy/sAUso.jpg

    Se invece creo un nuovo div riesco a renderlo graficamente come voglio, ma non funziona piu' il daterange.
    E sarebbe cosi:
    codice:
    <div class="input-daterange form-group table-bordered">
        <label for="arrivo" class="col-sm-3 control-label">Arrivo</label>
        <div class="col-sm-6">
          <input type="text" class="form-control" id="datepicker" name="start" required>
        </div>
      </div>
      
      <div class="input-daterange form-group table-bordered">
        <label for="partenza" class="col-sm-3 control-label">Partenza</label>
        <div class="col-sm-6">
          <input type="text" class="form-control" id="datepicker" name="end" required>
        </div>
      </div>
    Mentre il javascript che mi apre il calendario e' questo:
    codice:
    <script type="text/javascript">
       $(document).ready(function () 
       {
           $('.input-daterange').datepicker
           ({
              format: "dd/mm/yy",
                   startDate: "today",
                 language: "it",
              autoclose: true,
              todayHighlight: true    
               });
                
       });
    </script>
    Dove sbaglio e come potrei risolvere?

    Grazie

  2. #2
    Moderatore di Annunci siti web, Offro lavoro/collaborazione, Cerco lavoro L'avatar di cavicchiandrea
    Registrato dal
    Aug 2001
    Messaggi
    26,133
    Non conosco lo script ma io cambierei ID datepicker degli input start/end rendendolo univoco
    Cavicchi Andrea
    Problemi con javascript, jquery, ajax clicca qui

  3. #3
    Utente di HTML.it L'avatar di allin81
    Registrato dal
    Mar 2011
    Messaggi
    1,875
    In pratica renderesti i campi cosi'?
    codice:
    <input type="text" class="form-control" id="datepicker" name="start" required>
    <input type="text" class="form-control" id="datepicker2" name="end" required>

  4. #4
    Moderatore di Annunci siti web, Offro lavoro/collaborazione, Cerco lavoro L'avatar di cavicchiandrea
    Registrato dal
    Aug 2001
    Messaggi
    26,133
    Diciamo di sì, ma nel esempio funzionante datepicker è legato ad un div è ininfluente per funzionamento? Probabilmente si ma per scrupolo userei altri ID
    Cavicchi Andrea
    Problemi con javascript, jquery, ajax clicca qui

  5. #5
    Utente di HTML.it L'avatar di allin81
    Registrato dal
    Mar 2011
    Messaggi
    1,875
    ho provato a cambiare id ai campi di testo e di nuovo non funziona la funzione che mostra il range.
    In pratica posso scegliere come data iniziale il 25 marzo e come data finale il 24 marzo o antecedente...

    Si, nell'esempio funzionante datepicker e' legato ad un div, ma non posso crearne un altro altrimenti non funziona di nuovo.

    Per il momento sto risolvendo impaginando i campi uno sotto l'altro con l'etichetta sopra i campi e non alla sinistra, ma non e' il risultato estetico che volevo...

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.