formatdate - jQuery UI DatePicker-Cambiar formato de fecha

fecha jquery

Question

Estoy utilizando el Selector de fechas de UI de jQuery UI como 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 devuelvo esto:

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

Que es totalmente el formato equivocado. ¿Hay alguna manera de que pueda ser devuelto en el formato DD-MM-YYYY ?

Answer 1

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

El formato para 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'' );

Answer 2

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

Copie el enlace de abajo y pegue 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>

Copia el siguiente código y pégalo entre la etiqueta del cuerpo:

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

Si desea dos (2) tipos de texto de entrada como Start Date y End Date finalización, utilice este script y cambie el formato de la 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 texto de entrada como:

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

Answer 3

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

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

Answer 4

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

Answer 5

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 defina solo una vez y utilice el mismo formateador para traducir la cadena de formato a la fecha formateada.

Answer 6

Dentro del código de script jQuery solo pegue el código.

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

Esto debería funcionar.

Answer 7

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

Debe formatear el valor devuelto a una cadena usando su formato de fecha. Utilice la función formatDate de datepicker:

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

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

Answer 8

El siguiente código puede ayudar a verificar si el formulario obtuvo 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>

Answer 9

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

Answer 10

Esto funciona también:

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

Answer 11

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>

Answer 12

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

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

Answer 13

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>

Answer 14

Puedes agregar y probar de esta manera:

Archivo HTML :

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

Archivo JavaScript :

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

Answer 15

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

Por ejemplo, cuando configura el dateFormat como dd-mm-yy y el usuario escribe 1-1-1 . El selector de fecha lo convertirá internamente al 1 de Jan 01, 2001 pero llamar a val() en el objeto del selector de fecha devolverá la cadena "1-1-1" , exactamente lo que hay 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 que no permita 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 que le brinde una cadena con el formato que espera:

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 aunque el método getDate() del datepicker devolverá una fecha, solo puede hacer mucho con la entrada del usuario que no coincida exactamente con el formato de la fecha. Esto significa que, en ausencia de validación, es posible obtener una fecha de devolución diferente a la que espera el usuario. Cavtor emptor .

Answer 16

Si necesita la fecha en formato yy-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" });

Answer 17

Simplemente ejecuta esta página HTML, puedes 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>

Answer 18

Trate de usar el

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

y hay muchas opciones disponibles para el selector de fechas que puede encontrar aquí.

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

Así es como 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 
             }
      });
});

Answer 19

Yo uso esto:

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

Lo que devuelve una fecha de formato como " 20120118 " para el Jan 18, 2012 .

Answer 20

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

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

Answer 21

simplemente puede utilizar este formato en su función como

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

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

Answer 22

getDate función getDate devuelve una fecha de JavaScript. Usa 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 el selector de fechas:

$.datepicker.formatDate( format, date, settings ) : formatee una fecha en un valor de cadena con un formato específico.

La lista completa de especificadores de formato http://api.jqueryui.com/datepicker/#utility-formatDate .

Answer 23

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

Answer 24

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

Answer 25

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

Answer 26

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