javascript - insertar - mostrar fecha y hora actual en html5

Desactivar el tiempo en el selector de fecha y hora de arranque

Question

Estoy usando el selector de fecha y hora de arranque en mi aplicación web, hecho en PHP / HTML5 y JavaScript. Actualmente estoy usando uno de aquí: http://tarruda.github.io/bootstrap-datetimepicker/

Cuando estoy usando el control sin tiempo, no funciona. Simplemente muestra un cuadro de texto en blanco.

Solo quiero quitar el tiempo del selector de fecha y hora. ¿Hay alguna solución para esto?

<div class="well">
    <div id="datetimepicker4" class="input-append"> 
        <input data-format="yyyy-MM-dd" type="text"></input> 
        <span class="add-on"> 
            <i data-time-icon="icon-time" data-date-icon="icon-calendar"> </i> 
        </span> 
    </div> 
</div> 
<script type="text/javascript"> 
    $(function() { 
        $(''#datetimepicker4'').datetimepicker({ pickTime: false }); 
    }); 
</script>

Answer 1

Aquí está la solución para ti. Es muy fácil agregar un código como este:

    $(''#datetimepicker4'').datetimepicker({ 

    pickTime: false 

    minview:2;(Please see here.)

    }); 

Answer 2

Deshabilitar tiempo en selector de fecha y hora Boostrap ...

   $(document).ready(function () {
        $(''.timepicker'').datetimepicker({
            format: "dd-mm-yy",
        });
    });

Deshabilitar la fecha en el selector de fecha y hora Boostrap ...

   $(document).ready(function () {
        $(''.timepicker'').datetimepicker({
            format: "HH:mm A",
        });
    });

Answer 3

El criterio selector es ahora un atributo de la etiqueta DIV.

ejemplos son ...

data-date-format="dd MM yyyy" 
data-date-format="dd MM yyyy - HH:ii p
data-date-format="hh:ii"

por lo que el ejemplo de arranque para dd mm aaaa es: -

<div class="input-group date form_date col-md-5" data-date="" 
    data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
..... etc ....
</div>

mi configuración de Javascript es la siguiente:

            var picker_settings = {
                language:  ''en'',
                weekStart: 1,
                todayBtn:  1,
                autoclose: 1,
                todayHighlight: 1,
                startView: 2,
                minView: 2,
                forceParse: 0
            };

        $(datePickerId).datetimepicker(picker_settings);

Puede ver ejemplos de esto si descarga el archivo bootstrap-datetimepicker-master. Hay ejemplos de carpetas, cada una con un index.html.

Answer 4

Esto es para: Eonasdan''s Bootstrap Datetimepicker

En primer lugar, proporcionaría un atributo de id para <input> y luego inicializaría el datetimepicker directamente para esa <input> (y no para el contenedor principal):

<div class="container">
  <input data-format="yyyy-MM-dd" type="text" id="datetimepicker"/>
</div>
<script type="text/javascript">
  $(function() {
    // Bootstrap DateTimePicker v3
    $(''#datetimepicker'').datetimepicker({
      pickTime: false
    });
    // Bootstrap DateTimePicker v4
    $(''#datetimepicker'').datetimepicker({
      format: ''DD/MM/YYYY''
    });
  });
</script>

Para v3: Contrario a la respuesta de Ck Maurya :

• pickDate: false desactivará la fecha y solo permitirá elegir una hora
• pickTime: false desactivará la hora y solo permitirá elegir una fecha (que es lo que desea).

Para v4: Bootstrap Datetimepicker ahora usa el formato para determinar si hay un componente de tiempo presente. Si no hay un componente de tiempo presente, no le permitirá elegir una hora (y ocultar el ícono del reloj).

Answer 5

Esto muestra solo la fecha:

$(''#myDateTimePicker'').datetimepicker({
        format: ''dd.mm.yyyy'',
        minView: 2,
        maxView: 4,
        autoclose: true
      });

Más sobre el tema here

Answer 6

Esto permite mostrar la hora en el campo de entrada, pero oculta el botón selector de tiempo, que es el segundo elemento li en el acordeón

.bootstrap-datetimepicker-widget .list-unstyled li:nth-child(2){
    display: none;
}

Answer 7

Inicializa tu datetimepicker como este

Para deshabilitar el tiempo

$(document).ready(function(){
    $(''#dp3'').datetimepicker({
      pickTime: false
    });
});

Para deshabilitar la fecha

$(document).ready(function(){
    $(''#dp3'').datetimepicker({
      pickDate: false
    });
});

Para desactivar tanto la fecha como la hora

$(document).ready(function(){
   $("#dp3").datetimepicker(''disable''); 
});

por favor consulte la siguiente documentación si tiene alguna duda

http://eonasdan.github.io/bootstrap-datetimepicker/#options

Answer 8

No es como posponer el tiempo y el idioma a la vez que pongo esto y no trabajo

$(function () {
    $(''#datetimepicker2'').datetimepicker({
              locale: ''es'',
              pickTime: false
          });
});

Answer 9

Pasé un tiempo tratando de resolver esto debido a la actualización con DateTimePicker . Debería ingresar en un formato basado en la documentación de momento.js . Puedes usar lo que otras respuestas mostraron:

$(''#datetimepicker'').datetimepicker({ format: ''DD/MM/YYYY'' });

O puede usar algunos de los formatos localizados que ofrece moment.js para hacer solo una fecha, como por ejemplo:

$(''#datetimepicker'').datetimepicker({locale: ''fr'', format: ''L'' });

Al usar esto, puede mostrar solo una hora ( LT ) o fecha ( L ) según la configuración regional . La documentación para datetimepicker no era clara para mí, ya que se adapta automáticamente a la entrada proporcionada (fecha o única hora) a través del formato moment.js . Espero que esto ayude a aquellos que aún buscan.

Answer 10

Probé todas las soluciones publicadas aquí, pero ninguna de ellas me funcionó. Logré desactivar el tiempo usando esta línea de código en mi jQuery:

$(''#datetimepicker4'').datetimepicker({
    format: ''YYYY-MM-DD''
});

Esto estableció el formato solo a la fecha e inhabilitó por completo el tiempo. Espero que esto ayude.

Answer 11

Sé que esto es tarde, pero la respuesta es simplemente eliminar el "tiempo" de la palabra, datetimepicker para cambiarlo a datepicker . Puede formatearlo con dateFormat .

      jQuery( "#datetimepicker4" ).datepicker({
        dateFormat: "MM dd, yy",
      });

Answer 12

Verifique el fragmento a continuación

<div class="container">
<div class="row">
    <div class=''col-sm-6''>
        <div class="form-group">
            <div class=''input-group date'' id=''datetimepicker4''>
                <input type=''text'' class="form-control" />
                <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span>
                </span>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(function() {              
           // Bootstrap DateTimePicker v4
           $(''#datetimepicker4'').datetimepicker({
                 format: ''DD/MM/YYYY''
           });
        });      
    </script>
</div>

Puede consultar http://eonasdan.github.io/bootstrap-datetimepicker/ para obtener documentación y otras funciones en detalle. Esto debería funcionar.

Actualización para admitir i18n

Use formatos localizados de moment.js:

• L solo para fecha
• LT solo por tiempo
• L LT para fecha y hora

Consulte otros formatos localizados en la documentación de moment.js ( https://momentjs.com/docs/#/displaying/format/ )

Answer 13

    $(function () {
        $(''#datetimepicker9'').datetimepicker({
            viewMode: ''years'',
            format: ''DD/MM/YYYY'' /*Add this line to remove time format*/
        });
    });

Answer 14

 $("#datetimepicker4").datepicker({
    dateFormat: ''mm/dd/yy'',
    changeMonth: true,
    changeYear: true,
    showOtherMonths: true,
    selectOtherMonths: true,
    pickTime: false,
    format: ''YYYY-MM-DD''
});

Answer 15

$(''#datetimepicker'').datetimepicker({ minView: 2, pickTime: false, });

Por favor, intente si funciona para usted también

Answer 16

<div class="container">
  <input type="text" id="datetimepicker"/>
</div>

<script type="text/javascript">
  $(function() {
    // trigger datepicker
    $(''#datetimepicker'').datetimepicker({
       pickTime: false,
        minView: 2,
        format: ''dd/mm/yyyy'',
        autoclose: true,
    });
  });
</script>

Answer 17

<script type="text/javascript">
        $(function () {
                  $(''#datepicker'').datetimepicker({
                     format: ''YYYY/MM/DD''
               });
            });
</script>

Answer 18

your same code work''s fine, just add some link reference

<!DOCTYPE HTML>
<html>
    <head>
        <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
        <link rel="stylesheet" type="text/css" media="screen"
              href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">


    </head>
    <body>
        <div class="well">
            <div id="datetimepicker4" class="input-append"> 
                <input data-format="yyyy-MM-dd" type="text"></input> 
                <span class="add-on"> 
                    <i data-time-icon="icon-time" data-date-icon="icon-calendar"> </i> 
                </span> 
            </div> 
        </div> 

        <script type="text/javascript"
                src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js">
        </script> 
        <script type="text/javascript"
                src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js">
        </script>
        <script type="text/javascript"
                src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js">
        </script>
        <script type="text/javascript"
                src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.pt-BR.js">
        </script>
        <script type="text/javascript">
            $(function () {
                $(''#datetimepicker4'').datetimepicker({pickTime: false});
            });
        </script>

    </body>
    </html>