jQuery UI DatePicker - Cambiar formato de fecha

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?

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í:

• http://api.jqueryui.com/datepicker/#option-dateFormat
• http://api.jqueryui.com/datepicker/#utility-formatDate

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

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

Esto debería funcionar.

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í .

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"/>

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' );

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í .

$("#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

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

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 
             }
      });
});

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>

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" });

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

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>

Esto también funciona:

$("#datepicker").datepicker({
    dateFormat:'d-m-yy'
});

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

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>

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 .

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>

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>

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

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

Yo uso esto:

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

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

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>

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.

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' );     
  }
});

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
});

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
    });
});

Esto es lo que funcionó para mí:

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

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'})