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


101

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 uso el control sin tiempo, no funciona. Solo muestra un cuadro de texto en blanco.

Solo quiero eliminar la hora 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>

4
Muestra el código que estás usando, no todos somos físicos
Steve

1
Agregue el código en cuestión usando Editar ...
Praveen Kumar Purushothaman

2
@Steve no todos somos psíquicos, solo algunos de nosotros lo somos xD
Timo Huovinen

Para mí, esto minView:'month'funcionó, no quería que se mostrara la selección de tiempo. Obtuve la ayuda de su repositorio de github. github.com/smalot/bootstrap-datetimepicker/issues/…
Código

Respuestas:


134

Verifique el siguiente fragmento

<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

Utilice formatos localizados de moment.js:

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

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


La opción pickDate que cita no está documentada en la documentación a la que se vincula.
Jeremy Burton

2
La respuesta es incorrecta con respecto a la pregunta. La pregunta era cómo desactivar la hora, no la fecha. Además, ese código probablemente todavía no funcionará, ya que adjunta el selector de fecha al padre div(tal vez la biblioteca maneja esto y busca <input>-sub-elementos)
Peter Ilfrich

12
pickDate y pickTime se han eliminado en la versión actual de Bootstrap Datetimepicker de Eonasdan. En su lugar, utilice formato.
gl03

3
Esto está mal, la configuración del formato rompe la internacionalización
Kikin-Sama

41

Probé todas las soluciones publicadas aquí, pero ninguna funcionó para mí. Me las arreglé para deshabilitar el tiempo usando esta línea de código en mi jQuery:

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

Esto estableció el formato solo para la fecha y deshabilitó la hora por completo. Espero que esto ayude.


5
De todas las soluciones en esta página, esta es la única que funcionó para mí. Usando v4.7.14 de bootstrap-datetimepicker lib.
Josh Buchea

2
Solo para evitar cualquier confusión, ya que parece haber algunos selectores de fecha y hora con nombres similares, señalaré que esto funcionó para mí para este complemento en particular: eonasdan.github.io/bootstrap-datetimepicker
Paul Calabro

Gracias, esto funcionó para mí, sin embargo, mi formulario todavía muestra el ícono para cambiar al selector de tiempo, y te permite cambiar, luego muestra 00:00. No cambia lo que se envía con el formulario, pero ¿hay alguna forma de eliminar el icono del reloj para que el usuario no pueda acceder a la parte del formulario del selector de tiempo? ¡Gracias de nuevo!
jackerman09

Debes estar usando una versión diferente de DateTimePicker porque el icono de la hora desapareció en el mío.
Celt

26

Esto es para: Bootstrap Datetimepicker de Eonasdan

En primer lugar, proporcionaría un idatributo para <input>y luego inicializaría el selector de fecha y hora directamente para eso <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: Contrariamente a la respuesta de Ck Maurya :

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

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


¿Por qué se votó en contra? Esta es la única respuesta que explica correctamente que la opción del complemento ha cambiado en la última versión. Me habría ahorrado unos minutos de confusión si esta fuera la respuesta principal.
gl03

1
Tiene que ser una fecha en MAYÚSCULAS para que funcione, extrañamente
sidonaldson

Sí, esa es la forma en que se especifica el formato de fecha en Javascript (al contrario de la forma en que se define el formato de fecha / hora en Java). Me tomó algo de tiempo darme cuenta de eso también.
Peter Ilfrich

Gracias, esto funcionó para mí, sin embargo, mi formulario todavía muestra el ícono para cambiar al selector de tiempo, y te permite cambiar, luego muestra 00:00. No cambia lo que se envía con el formulario, pero ¿hay alguna forma de eliminar el icono del reloj para que el usuario no pueda acceder a la parte del formulario del selector de tiempo? ¡Gracias de nuevo!
jackerman09

jackerman09, tenga en cuenta la versión de datetimepicker que utiliza. El comportamiento descrito se aplica al datetimepicker v3, v4 de Eonasdan. Si está utilizando la última versión (que debería), al no tener un componente de hora en el formato, se eliminará automáticamente el icono del reloj. Y, por favor, no publique el mismo comentario en varias respuestas ... Sugiere una falta de motivación ...
Peter Ilfrich

20

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

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

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

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

Con esto, puede mostrar solo una hora ( LT) o una fecha ( L) según la configuración regional . La documentación para datetimepicker no me quedó claro si se adapta automáticamente a la entrada proporcionada (fecha o solo hora) a través del moment.jsformato. Espero que esto ayude a los que todavía buscan.


4
Esta es la mejor respuesta, porque incluye el formato dependiente de la configuración regional, en lugar de "codificar" el formato.
Nahn

17
$('#datetimepicker').datetimepicker({ 
    minView: 2, 
    pickTime: false, 
    language: 'pt-BR' 
});

Por favor, intente si también funciona para usted


Funciona a las mil maravillas :) Muchas gracias. ¿Puedo preguntar qué es la configuración de minView? Sin este ajuste, se muestra la hora.
FrenkyB

No lo sé, pero también tengo este problema y se resuelve este código.
ImBhavin95

Su punto era correcto, más de eso aquí: github.com/smalot/bootstrap-datetimepicker/issues/416 .
FrenkyB

¡Perfecto! Para no romper la configuración regional, use:$('#datetimepicker').datetimepicker({ minView: 2, pickTime: false, language: 'pt-BR' });
Aline Matos

6

Inicialice su datetimepicker así

Para desactivar el tiempo

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

Para desactivar la fecha

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

Para deshabilitar la fecha y la hora

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

consulte la siguiente documentación si tiene alguna duda

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


6
<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>

5

Esto muestra solo la fecha:

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

Más sobre el tema aquí


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

1

El criterio de selección ahora es 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 prácticos de estos si descarga el archivo bootstrap-datetimepicker-master. Hay carpetas de muestra, cada una con un index.html.


1

Para la versión bootstrap 4, este código funciona;

$('#payment-date-time-select').datetimepicker({
    startView:2,
    minView:2,
});

0

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

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

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

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

0
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>

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

0

Esto permite mostrar el tiempo 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;
}

-1

Sé que esto es tarde, pero la respuesta es simplemente quitar "tiempo" de la palabra datetimepickerpara cambiarla a datepicker. Puede formatearlo con dateFormat.

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

No estoy seguro de por qué respondiste a mi comentario, Dmitry, porque de hecho responde a la pregunta del cartel. El hecho de que haya varios dateFormats no es relevante para la pregunta y solo se muestra aquí como un ejemplo.
Dawn Green

-1

Aquí tienes la solución. Es muy fácil simplemente agregar un código como este:

    $('#datetimepicker4').datetimepicker({ 

    pickTime: false 

    minview:2;(Please see here.)

    }); 

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

-3

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

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

2
será difícil obtener una idea de su respuesta.
Anptk
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.