Formato de fecha jQuery

186

¿Cómo puedo formatear la fecha usando jQuery? Estoy usando el siguiente código pero obtengo un error:

 $("#txtDate").val($.format.date(new Date(), 'dd M yy'));

Por favor sugiera una solución.

jquery 
— DotnetSparrow
fuente
1
Error de tiempo de ejecución de Microsoft JScript: '$ .format' es nulo o no es un objeto
— DotnetSparrow
¿ha incluido el complemento que incluye las funciones de formato?
— zzzzBov
39
Un disimulado forro para aaaa-mm-dd:new Date().toJSON().substring(0,10)
— Mike Causer
el mismo de la fformat (doble f)
— jorrebor
10
¡ADVERTENCIA! el código pulido: new Date().toJSON().substring(0,10)funcionó bien, ¡pero devuelve la fecha como GMT! Como estamos 7 horas detrás de GMT, me estaba equivocando después de las 5:00 p.m. Acabo de perder un par de horas para encontrar la causa / suspiro /. Referencia
— JayRO-GreyBeard

Respuestas:

103

jQuery dateFormat es un complemento separado. Necesita cargar eso explícitamente usando una <script>etiqueta.

— Pekka
fuente
10
@Dotnet seguro, utilizando otras funciones: ver, por ejemplo, aquí
— Pekka
33
@Dotnet si se pudiera hacer usando jQuery, no habría un complemento jQuery para formatear la fecha, ¿verdad?
— Pekka
1
No puedo decir si esto debería ser una broma o no ... es casi brillante @pekka. Además, es la respuesta correcta.
— jcolebrand
1
jQuery dateFormat no funciona con jQuery Validate. Ni la versión pura de JavaScript.
— Kunal B.
3
Es difícil creer que jillaue vainilla no tenga una función para formatear una fecha. Esta pregunta tiene 5 años, ¿sigue siendo así?
— Felwithe
212

agregue el complemento jquery ui en su página. 

 $("#txtDate").val($.datepicker.formatDate('dd M yy', new Date()));
— Tulasiram
fuente
2
Esta es la respuesta que estaba buscando, especialmente porque estoy usando jQuery UI en otro lugar.
— nzifnab
¿Hay alguna forma de obtener la fecha + 2 años?
— Serjas
1
var currentDate = new Date (); currentDate.setFullYear (currentDate.getFullYear () + 2);
— Thulasiram
es una pena que no sea compatible con el formato de tiempo = S
— Thomas
44
Aquí está el enlace al documento oficial: api.jqueryui.com/datepicker/#utility-formatDate
— Guillaume Husta
101

Una alternativa sería la simple función js date (), si no desea utilizar el complemento jQuery / jQuery:

p.ej:

var formattedDate = new Date("yourUnformattedOriginalDate");
var d = formattedDate.getDate();
var m =  formattedDate.getMonth();
m += 1;  // JavaScript months are 0-11
var y = formattedDate.getFullYear();

$("#txtDate").val(d + "." + m + "." + y);

ver: 10 formas de formatear hora y fecha usando JavaScript

Si desea agregar ceros iniciales al día / mes, este es un ejemplo perfecto: Javascript agrega ceros iniciales hasta la fecha

y si desea agregar tiempo con ceros a la izquierda, intente esto: getMinutes () 0-9: ¿cómo hacerlo con dos números?

— Pascal
fuente
será útil agregar segundos como lo hizo
— @sein
Esto es bueno hasta que el usuario quiera la fecha reciente o una fecha se introduzca en el Dateobjeto. ¿Qué hay de obtener la fecha en el mismo formato pero 6 meses antes de la fecha de alimentación?
— Sanjok Gurung
31

Aquí hay una función realmente básica que acabo de hacer que no requiere ningún complemento externo:

$.date = function(dateObject) {
    var d = new Date(dateObject);
    var day = d.getDate();
    var month = d.getMonth() + 1;
    var year = d.getFullYear();
    if (day < 10) {
        day = "0" + day;
    }
    if (month < 10) {
        month = "0" + month;
    }
    var date = day + "/" + month + "/" + year;

    return date;
};

Utilizar:

$.date(yourDateObject);

Resultado:

dd/mm/yyyy
— Owen
fuente
27

ThulasiRam, prefiero tu sugerencia. Funciona bien para mí en una sintaxis / contexto ligeramente diferente:

var dt_to = $.datepicker.formatDate('yy-mm-dd', new Date());

Si decide utilizar el selector de fecha de la interfaz de usuario de JQuery , asegúrese de utilizar las referencias adecuadas en la sección <head> de su documento:

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />

<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
— Dominik Ras
fuente
25

Estoy usando Moment JS . Es muy útil y fácil de usar.

var date = moment(); //Get the current date
date.format("YYYY-MM-DD"); //2014-07-10
— Jhonatascf
fuente
Estoy de acuerdo usuario3812343! Moment JS es genial, muy fácil de absorber por aquellos que trabajaron con la sintaxis .NET.
— Dominik Ras
necesita en año mes día hora minuto segundo?
— Chaitanya Desai
15

Espero que este código solucione tu problema.

var d = new Date();

var curr_day = d.getDate();
var curr_month = d.getMonth();
var curr_year = d.getFullYear();

var curr_hour = d.getHours();
var curr_min = d.getMinutes();
var curr_sec = d.getSeconds();

curr_month++ ; // In js, first month is 0, not 1
year_2d = curr_year.toString().substring(2, 4)

$("#txtDate").val(curr_day + " " + curr_month + " " + year_2d)
— Sein Navarro
fuente
8

Si está usando jquery ui, puede usarlo como a continuación, puede especificar su propio formato de fecha

$.datepicker.formatDate( "D dd-M-yy", new Date()) // Output "Fri 08-Sep-2017"
— Jatin C
fuente
7

Solo usa esto:

var date_str=('0'+date.getDate()).substr(-2,2)+' '+('0'+date.getMonth()).substr(-2,2)+' '+('0'+date.getFullYear()).substr(-2,2);
— Pezón
fuente
1
Tenga en cuenta que esto le da una fecha hace un mes (a menos que se acceda en enero, en cuyo caso le da '00' para el mes) porque date.getMonth () es un índice basado en cero.
— jaybrau
7

Agregue esta función a su <script></script>y llame desde donde quiera en ese<script></script> 

<script>

function GetNow(){
    var currentdate = new Date(); 
    var datetime = currentdate.getDate() + "-"
            + (currentdate.getMonth()+1)  + "-" 
            + currentdate.getFullYear() + " "  
            + currentdate.getHours() + ":"  
            + currentdate.getMinutes() + ":" 
            + currentdate.getSeconds();
    return datetime;
}

window.alert(GetNow());

</script>

o simplemente puede usar Jquery, que también proporciona funciones de formato: -

window.alert(Date.parse(new Date()).toString('yyyy-MM-dd H:i:s'));

Amo la segunda opción. Resuelve todos los problemas de una vez.

— usuario8373067
fuente
1
Esa segunda opción me da "el argumento de la raíz debe estar entre 2 y 36 en Number.toString". Se estrella.
— IRGeekSauce
6

Aunque esta pregunta se hizo hace unos años, ya no se requiere un complemento jQuery siempre que el valor de la fecha en cuestión sea una cadena con formato mm/dd/yyyy(como cuando se usa un selector de fecha);

var birthdateVal = $('#birthdate').val();
//birthdateVal: 11/8/2014

var birthdate = new Date(birthdateVal);
//birthdate: Sat Nov 08 2014 00:00:00 GMT-0500 (Eastern Standard Time)
— Scott Pelak
fuente
5

Puede agregar la nueva función de usuario jQuery 'getDate'

JSFiddle: getDate jQuery

O puede ejecutar el fragmento de código. Simplemente presione el botón "Ejecutar fragmento de código" debajo de esta publicación.

// Create user jQuery function 'getDate'
(function( $ ){
   $.fn.getDate = function(format) {

	var gDate		= new Date();
	var mDate		= {
	'S': gDate.getSeconds(),
	'M': gDate.getMinutes(),
	'H': gDate.getHours(),
	'd': gDate.getDate(),
	'm': gDate.getMonth() + 1,
	'y': gDate.getFullYear(),
	}

	// Apply format and add leading zeroes
	return format.replace(/([SMHdmy])/g, function(key){return (mDate[key] < 10 ? '0' : '') + mDate[key];});

	return getDate(str);
   }; 
})( jQuery );


// Usage: example #1. Write to '#date' div
$('#date').html($().getDate("y-m-d H:M:S"));

// Usage: ex2. Simple clock. Write to '#clock' div
function clock(){
	$('#clock').html($().getDate("H:M:S, m/d/y"))
}
clock();
setInterval(clock, 1000); // One second

// Usage: ex3. Simple clock 2. Write to '#clock2' div
function clock2(){

	var format = 'H:M:S'; // Date format
	var updateInterval = 1000; // 1 second
	var clock2Div	= $('#clock2'); // Get div
	var currentTime	= $().getDate(format); // Get time
	
	clock2Div.html(currentTime); // Write to div
	setTimeout(clock2, updateInterval); // Set timer 1 second
	
}
// Run clock2
clock2();

// Just for fun
// Usage: ex4. Simple clock 3. Write to '#clock3' span

function clock3(){

	var formatHM = 'H:M:'; // Hours, minutes
	var formatS = 'S'; // Seconds
	var updateInterval = 1000; // 1 second
	var clock3SpanHM	= $('#clock3HM'); // Get span HM
	var clock3SpanS	= $('#clock3S'); // Get span S
	var currentHM	= $().getDate(formatHM); // Get time H:M
	var currentS	= $().getDate(formatS); // Get seconds
	
	clock3SpanHM.html(currentHM); // Write to div
	clock3SpanS.fadeOut(1000).html(currentS).fadeIn(1); // Write to span
	setTimeout(clock3, updateInterval); // Set timer 1 second
	
}
// Run clock2
clock3();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

<div id="date"></div><br>
<div id="clock"></div><br>
<span id="clock3HM"></span><span id="clock3S"></span>
Expandir fragmento

¡Disfrutar!

— usuario3439968
fuente
4

Podrías hacer uso de este fragmento

$('.datepicker').datepicker({
  changeMonth: true,
  changeYear: true,
  yearRange: '1900:+0',
  defaultDate: '01 JAN 1900',
  buttonImage: "http://www.theplazaclub.com/club/images/calendar/outlook_calendar.gif",
  dateFormat: 'dd/mm/yy',
  onSelect: function() {
    $('#datepicker').val($(this).datepicker({
      dateFormat: 'dd/mm/yy'
    }).val());
  }
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<p>
  selector: <input type="text" class="datepicker">
</p>
<p>
  output: <input type="text" id="datepicker">
</p>
Expandir fragmento

— Bajju
fuente
4

Simplemente podemos formatear la fecha como,

var month = date.getMonth() + 1;
var day = date.getDate();
var date1 = (('' + day).length < 2 ? '0' : '') + day + '/' + (('' + month).length < 2 ? '0' : '') + month + '/' + date.getFullYear();
$("#txtDate").val($.datepicker.formatDate('dd/mm/yy', new Date(date1)));

Donde "fecha" es una fecha en cualquier formato.

— itzmebibin
fuente
1

Use la opción dateFormat al crear el selector de fecha.

$("#startDate").datepicker({
                    changeMonth: true,
                    changeYear: true,
                    showButtonPanel: true,
                    dateFormat: 'yy/mm/dd'
                });
— deenfirdoush
fuente
1

puede usar el siguiente código sin el complemento.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script>
$( function() {
    //call the function on page load
	$( "#datepicker" ).datepicker();
    //set the date format here
    $( "#datepicker" ).datepicker("option" , "dateFormat", "dd-mm-yy");
	
    // you also can use 
    // yy-mm-dd
    // d M, y
    // d MM, y
    // DD, d MM, yy
    // &apos;day&apos; d &apos;of&apos; MM &apos;in the year&apos; yy (With text - 'day' d 'of' MM 'in the year' yy)
	} );
 </script>

Pick the Date: <input type="text" id="datepicker">
Expandir fragmento

— Mohamed Farshad
fuente
1

Esto funcionó para mí con una ligera modificación y sin ningún complemento

Entrada: mié 11 de abril de 2018 00:00:00 GMT + 0000

$.date = function(orginaldate) { 
    var date = new Date(orginaldate);
    var day = date.getDate();
    var month = date.getMonth() + 1;
    var year = date.getFullYear();
    if (day < 10) {
        day = "0" + day;
    }
    if (month < 10) {
        month = "0" + month;
    }
    var date =  month + "/" + day + "/" + year; 
    return date;
};

$.date('Wed Apr 11 2018 00:00:00 GMT+0000')

Salida: 04/11/2018

— Ashokkumar C
fuente
0

No estoy muy seguro si se me permite responder una pregunta que se hizo hace como 2 años, ya que esta es mi primera respuesta en stackoverflow, pero aquí está mi solución;

Si una vez recuperó la fecha de su base de datos MySQL, divídala y luego use los valores divididos. 

$(document).ready(function () {
    var datefrommysql = $('.date-from-mysql').attr("date");
    var arraydate = datefrommysql.split('.');
    var yearfirstdigit = arraydate[2][2];
    var yearlastdigit = arraydate[2][3];
    var day = arraydate[0];
    var month = arraydate[1];
    $('.formatted-date').text(day + "/" + month + "/" + yearfirstdigit + yearlastdigit);
});

Aquí hay un violín .

— Terby
fuente
0

Aquí está el ejemplo de código completo que he mostrado en el navegador, espero que también sea útil, gracias.

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#datepicker" ).datepicker({
                minDate: -100,
                maxDate: "+0D",
                dateFormat: 'yy-dd-mm',
                onSelect: function(datetext){
                    $(this).val(datetext);
                },
            });
         });
      </script>
   </head>
   <body>
      <!-- HTML --> 
      <p>Enter Date: <input type="text" id="datepicker"></p>
   </body>
</html>
— Kamlesh
fuente
-1

puedes usar esta codificación 

$('[name="tgllahir"]').val($.datepicker.formatDate('dd-mm-yy', new Date(data.tgllahir)));
— Endang Taryana
fuente
2
Se desaconsejan las respuestas de solo código porque no explican cómo resuelven el problema. Actualice su respuesta para explicar cómo mejora esto en las muchas otras respuestas aceptadas y votadas que esta pregunta ya tiene. Además, esta pregunta tiene 6 años de antigüedad, sus esfuerzos serían más apreciados por los usuarios que tienen preguntas recientes sin respuesta. Por favor revise ¿Cómo escribo una buena respuesta ?
— FluffyKitten
1
La respuesta no mencionó que se requería jQuery UI
— sean2078
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.