jQuery UI DatePicker - Cambiar formato de fecha


546

Estoy usando el UI DatePicker de jQuery UI como el selector independiente. Tengo este codigo:

<div id="datepicker"></div>

Y el siguiente JS:

$('#datepicker').datepicker();

Cuando intento devolver el valor con este código:

var date = $('#datepicker').datepicker('getDate');

Me devuelven esto:

Tue Aug 25 2009 00:00:00 GMT+0100 (BST)

Que es totalmente el formato incorrecto. ¿Hay alguna manera de que me lo devuelvan en el formato DD-MM-YYYY?


2
Perfecto, gracias, ¿por qué $ .datepicker.formatDate ("aa-mm-dd", nueva fecha (2007, 1 - 1, 26)); trabaja como en la documentacion?
Hein du Plessis

Respuestas:


961

Aquí hay uno específico para su código:

var date = $('#datepicker').datepicker({ dateFormat: 'dd-mm-yy' }).val();

Más información general disponible aquí:


66
Esto solo me da el mismo formato que especifiqué en el selector de fecha y no dd-mm-aa. utilizando la versión 1.10. El answear a continuación funciona bien.
Tommy

44
El yyme está dando 2015. ¿Cómo puedo obtener solo 15?
SearchForKnowledge

66
@SearchForKnowledge solo usa y. datepicker-formatting
Shadoath

11
Tenga en cuenta que si ya definió previamente un formato diferente, esto no funciona, entonces debería hacerlo$("#datepicker").datepicker("option", "dateFormat", "dd-mm-yy" ).val()
João Pimentel Ferreira

44
en versiones anteriores format: 'dd-mm-yyyy',debería funcionar
TarangP

99

dentro del código del script jQuery solo pegue el código.

$( ".selector" ).datepicker({ dateFormat: 'yy-mm-dd' });

Esto debería funcionar.


10
.selectory #datepickerno son lo mismo Pegar su código literalmente no funcionaría.
Dave Jarvis

63

El getDatemétodo de datepicker devuelve un tipo de fecha, no una cadena.

Debe formatear el valor devuelto en una cadena utilizando su formato de fecha. Use la formatDatefunción datepicker :

var dateTypeVar = $('#datepicker').datepicker('getDate');
$.datepicker.formatDate('dd-mm-yy', dateTypeVar);

La lista completa de especificadores de formato está disponible aquí .


34

Aquí complete el código para el selector de fecha con formato de fecha (aa / mm / dd).

Copie el enlace a continuación y péguelo en la etiqueta de la cabeza:

   <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>  
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>  
   <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 

   <script type="text/javascript">
       $(function() {
               $("#datepicker").datepicker({ dateFormat: "yy-mm-dd" }).val()
       });
   </script>

Copie el siguiente código y péguelo entre la etiqueta del cuerpo:

      Date: <input type="text" id="datepicker" size="30"/>    

Si desea dos (2) entradas, escriba un texto como Start Datey End Dateluego use este script y cambie el formato de fecha.

   <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>  
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>  
   <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 

   <script type="text/javascript">
       $(function() {
               $("#startdate").datepicker({ dateFormat: "dd-mm-yy" }).val()
               $("#enddate").datepicker({ dateFormat: "dd-mm-yy" }).val()
       });

   </script>  

Dos textos de entrada como:

      Start Date: <input type="text" id="startdate" size="30"/>    
      End Date: <input type="text" id="enddate" size="30"/>

19

formato de fecha

El formato de las fechas analizadas y mostradas. Este atributo es uno de los atributos de regionalización. Para obtener una lista completa de los formatos posibles, consulte la función formatDate.

Ejemplos de código Inicialice un selector de fecha con la opción dateFormat especificada.

$( ".selector" ).datepicker({ dateFormat: 'yy-mm-dd' });

Obtenga o establezca la opción dateFormat, después de init.

//getter
var dateFormat = $( ".selector" ).datepicker( "option", "dateFormat" );
//setter
$( ".selector" ).datepicker( "option", "dateFormat", 'yy-mm-dd' );

La primera línea de código en este ejemplo hace que el "Selector de fecha" funcione con un formato de fecha específico, en lugar del formato estadounidense predeterminado mm / dd / aa.
Ryan

3
@ Ryan no me funciona, ¿tienes un ejemplo que incluya todas las líneas de código?
Knocte

19

getDateLa función devuelve una fecha de JavaScript. Use el siguiente código para formatear esta fecha:

var dateObject = $("#datepicker").datepicker("getDate");
var dateString = $.datepicker.formatDate("dd-mm-yy", dateObject);

Utiliza una función de utilidad que está integrada en datepicker:

$.datepicker.formatDate( format, date, settings ) - Formatee una fecha en un valor de cadena con un formato especificado.

La lista completa de especificadores de formato está disponible aquí .


2
Hubiera sido mejor si enriquecieras la respuesta de @kcsoft (como voy a hacer) en lugar de publicar una nueva;)
azulada el

10

$("#datepicker").datepicker("getDate") devuelve un objeto de fecha, no una cadena.

var dateObject = $("#datepicker").datepicker("getDate"); // get the date object
var dateString = dateObject.getFullYear() + '-' + (dateObject.getMonth() + 1) + '-' + dateObject.getDate();// Y-n-j in php date() format

10
<script type="text/javascript">
  $(function() {
    $( "#date" ).datepicker( {minDate: '0', dateFormat: 'yy-dd-mm' } );
  });
</script>

9

Intenta usar el

$( ".selector" ).datepicker({ dateFormat: 'dd/mm/yy' });  

y hay muchas opciones disponibles Para el selector de fechas puede encontrarlo aquí

http://api.jqueryui.com/datepicker/

Así llamamos al selector de fechas con el parámetro

$(function() {
      $('.selector').datepicker({
            dateFormat: 'dd/mm/yy',
            changeMonth: true,
            numberOfMonths: 1,
            buttonImage: 'contact/calendar/calendar.gif',
            buttonImageOnly: true,
            onSelect: function(selectedDate) {
                 // we can write code here 
             }
      });
});

6

simplemente puede usar este formato en su función como

     $(function() {  
        $( "#datepicker" ).datepicker({
            dateFormat: 'dd/mm/yy',
          changeMonth: true,
          changeYear: true
        });
      });

<input type="text" id="datepicker"></p>

5

Si necesita la fecha en formato aa-mm-dd, puede usar esto: -

$("#datepicker").datepicker({ dateFormat: "yy-mm-dd" });

Puede encontrar todos los formatos compatibles https://jqueryui.com/datepicker/#date-formats

Necesitaba el 06 de diciembre de 2015, hice esto:

$("#datepicker").datepicker({ dateFormat: "d M,y" });

4
$("#datepicker").datepicker({ dateFormat: "yy-mm-dd" }).val()

4

Simplemente ejecute esta página HTML. Puede ver varios formatos.

<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Format date</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
    $( "#datepicker" ).datepicker();
    $( "#format" ).change(function() {
        $( "#datepicker" ).datepicker( "option", "dateFormat", $( this ).val() );
    });
});
</script>
</head>
<body>

<p>Date: <input type="text" id="datepicker" size="30" /></p>

<p>Format options:<br />
<select id="format">
    <option value="mm/dd/yy">Default - mm/dd/yy</option>
    <option value="yy-mm-dd">ISO 8601 - yy-mm-dd</option>
    <option value="d M, y">Short - d M, y</option>
    <option value="d MM, y">Medium - d MM, y</option>
    <option value="DD, d MM, yy">Full - DD, d MM, yy</option>
    <option value="'day' d 'of' MM 'in the year' yy">With text - 'day' d 'of' MM 'in the year' yy</option>
</select>
</p>


</body>
</html>



3
<script>
    $(function() {  
        $("#datepicker").datepicker(); 
        $('#datepicker').datepicker('option', {dateFormat: 'd MM y'});
    }); 
    $("#startDate").datepicker({dateFormat: 'd MM y'}); 
</script>

3

Esto funciona sin problemas. Prueba esto.

Pega estos enlaces en la sección de tu cabeza.

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript"
        src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

A continuación se encuentra la codificación JS.

 <script>

        $(document).ready(function () {
            $('#completionDate').datepicker({
                dateFormat: 'yy-mm-dd', // enter date format you prefer (e.g. 2018-10-09)
                changeMonth: true,
                changeYear: true,
                yearRange: "-50:+10",
                clickInput: true,

                onSelect: function (date) {
                    loadMusterChit();
                }

            });
        });

    </script>

2

Si configura un selector de fecha en un input[type="text"]elemento, es posible que no obtenga una fecha con formato constante, especialmente cuando el usuario no sigue el formato de fecha para la entrada de datos.

Por ejemplo, cuando establece dateFormat como dd-mm-yyy los tipos de usuario 1-1-1. El selector de fecha lo convertirá Jan 01, 2001internamente, pero al invocar val()el objeto selector de fecha devolverá la cadena "1-1-1", exactamente lo que está en el campo de texto.

Esto implica que debe validar la entrada del usuario para asegurarse de que la fecha ingresada esté en el formato que espera o no permitir que el usuario ingrese las fechas de forma libre (prefiriendo el selector de calendario). Aun así, es posible forzar el código del selector de fecha para darle una cadena con el formato esperado:

var picker = $('#datepicker');

picker.datepicker({ dateFormat: 'dd-mm-yy' });

picker.val( '1-1-1' );  // simulate user input

alert( picker.val() );  // "1-1-1"

var d = picker.datepicker( 'getDate' );
var f = picker.datepicker( 'option', 'dateFormat' );
var v = $.datepicker.formatDate( f, d );

alert( v );             // "01-01-2001"

Sin embargo, tenga en cuenta que si bien el getDate()método del selector de fecha devolverá una fecha, solo puede hacer mucho con la entrada del usuario que no coincide exactamente con el formato de fecha. Esto significa que, en ausencia de validación, es posible recuperar una fecha diferente de la que el usuario espera. Advertencia emptor .


2

Estoy usando jquery para datepicker. Estas jqueries se usan para eso

<script src="jqueryCalendar/jquery-1.6.2.min.js"></script>
<script src="jqueryCalendar/jquery-ui-1.8.15.custom.min.js"></script>
<link rel="stylesheet" href="jqueryCalendar/jqueryCalendar.css">

Entonces sigues este código,

<script>
     jQuery(function() {
     jQuery( "#date" ).datepicker({ dateFormat: 'dd/mm/yy' });
                });
</script>

2

Mi opción se da a continuación:

$(document).ready(function () {
  var userLang = navigator.language || navigator.userLanguage;

  var options = $.extend({},
    $.datepicker.regional["ja"], {
      dateFormat: "yy/mm/dd",
      changeMonth: true,
      changeYear: true,
      highlightWeek: true
    }
  );

  $("#japaneseCalendar").datepicker(options);
});
#ui-datepicker-div {
  font-size: 14px;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css"
          href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.min.css">
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.1/i18n/jquery-ui-i18n.min.js"></script>
</head>
<body>
<h3>Japanese JQuery UI Datepicker</h3>
<input type="text" id="japaneseCalendar"/>

</body>
</html>


1

Finalmente obtuve la respuesta para el método de cambio de fecha datepicker:

$('#formatdate').change(function(){
    $('#datpicker').datepicker("option","dateFormat","yy-mm-dd");
});

1

Yo uso esto:

var strDate = $("#dateTo").datepicker('getDate').format('yyyyMMdd');

Que devuelve una fecha de formato como " 20120118" para Jan 18, 2012.


1

El siguiente código puede ayudar a verificar si el formulario tiene más de 1 campo de fecha:

<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Datepicker - Display month &amp; year menus</title>
    <link rel="stylesheet" href="jquery-ui.css" />
    <script src="jquery-1.8.3.js"></script>
    <script src="jquery-ui.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script>
    function pickDate(DateObject){
//      alert(DateObject.name)
       $(function() {
               $("#"+DateObject.name).datepicker({ dateFormat: "dd/mm/yy" }).val()
       });
    }
/*
    $(function() {
        $( "#datepicker" ).datepicker({
            changeMonth: true,
            changeYear: true
        });
    });
*/
    </script>
</head>
<body>

<p>From Date: <input type="text" name="FromDate" id="FromDate" size="9" onfocus="pickDate(this)"/></p>
<p>To Date: <input type="text" name="ToDate" id="ToDate" size="9" onfocus="pickDate(this)" /></p>


</body>
</html>

2
¿Cómo responde esto a la pregunta original sobre los formatos de fecha?
ryadavilli

0

Creo que la forma correcta de hacer esto sería algo como esto:

var picker = $('.date-picker');
var date = $.datepicker.formatDate(
    picker.datepicker('option', 'dateFormat'),
    picker.datepicker('getDate'));

De esta manera, se asegura de que la cadena de formato se define solo una vez y utiliza el mismo formateador para traducir la cadena de formato a la fecha formateada.


0

Aquí hay un fragmento de fecha de prueba futura listo para usar. Firefox por defecto es jquery ui datepicker. De lo contrario, se usa HTML5 datepicker. Si FF alguna vez admite HTML5 type = "date", el script simplemente será redundante. No olvide que las tres dependencias son necesarias en la etiqueta principal.

<script>
  src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<link rel="stylesheet"href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">  
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<!--Form element uses HTML 5 type="date"-->
<div class="form-group row">
    <label for="date" class="col-sm-2 col-form-label"Date</label>
    <div class="col-sm-10">          
       <input type="date" class="form-control" name="date" id="date" placeholder="date">
    </div>
</div>

<!--if the user is using FireFox it          
autoconverts type='date' into type='text'. If the type is text the 
script below will assign the jquery ui datepicker with options-->
<script>
$(function() 
{
  var elem = document.createElement('input');
  elem.setAttribute('type', 'date');

  if ( elem.type === 'text' ) 
  {
    $('#date').datepicker();
    $( "#date" ).datepicker( "option", "dateFormat", 'yy-mm-dd' );     
  }
});

0

debe usar data-date-format="yyyy-mm-dd"en su campo de entrada html y selector de datos inicial en JQuery como simple

$("#issue_date").datepicker({ 
    dateFormat: "yy-mm-dd",
    changeMonth: true,
    changeYear: true
});

0

Puede agregar e intentar de esta manera:

Archivo HTML :

<p><input type="text" id="demoDatepicker" /></p>

Archivo JavaScript :

$(function() {  
    $("#demoDatepicker").datepicker({
        dateFormat: 'dd/mm/yy',
        changeMonth: true,
        changeYear: true,
        constrainInput: false
    });
});

0

Esto es lo que funcionó para mí:

$.fn.datepicker.defaults.format = 'yy-mm-dd'

0

Así que luché con esto y pensé que me estaba volviendo loco, la cuestión es que el selector de fecha de arranque se estaba implementando, no jQuery, por lo que las opciones eran diferentes;

$('.dateInput').datepicker({  format: 'dd/mm/yyyy'})
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.