jQuery日期格式 - 开卷题库

小开

最佳答案

jQuery dateFormat is a separate plugin. You need to load that explicitly using a <script> tag.

小开

Just use this:

var date_str=('0'+date.getDate()).substr(-2,2)+' '+('0'+date.getMonth()).substr(-2,2)+' '+('0'+date.getFullYear()).substr(-2,2);

小开

Take a look here:

https://github.com/mbitto/jquery.i18Now

This jQuery plugin helps you to format and translate date and time according to your preference.

小开

add jquery ui plugin in your page.

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

小开

ThulasiRam, I prefer your suggestion. It works well for me in a slightly different syntax/context:

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

If you decide to utilize datepicker from JQuery UI, make sure you use proper references in your document's < head > section:

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

小开

An alternative would be simple js date() function, if you don't want to use jQuery/jQuery plugin:

e.g.:

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

see: 10 ways to format time and date using JavaScript

If you want to add leading zeros to day/month, this is a perfect example: Javascript add leading zeroes to date

and if you want to add time with leading zeros try this: getMinutes() 0-9 - how to with two numbers?

小开

Here's a really basic function I just made that doesn't require any external plugins:

$.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;
};

Use:

$.date(yourDateObject);

Result:

dd/mm/yyyy

小开

I'm not quite sure if I'm allowed to answer a question that was asked like 2 years ago as this is my first answer on stackoverflow but, here's my solution;

If you once retrieved the date from your MySQL database, split it and then use the splitted values.

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

Here's a fiddle.

小开

I'm using Moment JS. Is very helpful and easy to use.

var date = moment(); //Get the current date
date.format("YYYY-MM-DD"); //2014-07-10

小开

I hope this code will fix your problem.

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)

小开

Use dateFormat option when creating date picker.

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

小开

Though this question was asked a few years ago, a jQuery plugin isn't required anymore provided the date value in question is a string with format mm/dd/yyyy (like when using a date-picker);

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)

小开

Here is the full code example I have show on browser, Hope you also helpful thanks.

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

小开

You could make use of this snippet

$('.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>

小开

Simply we can format the date like,

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

Where "date" is a date in any format.

小开

You can add new user jQuery function 'getDate'

JSFiddle: getDate jQuery

Or you can run code snippet. Just press "Run code snippet" button below this post.

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

Enjoy!

小开

you can use the below code without the plugin.

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

小开

You can try http://www.datejs.com/

 $('#idInput').val( Date.parse("Jun 18, 2017 7:00:00 PM").toString('yyyy-MM-dd'));

BR

小开

Add this function to your <script></script> and call from where ever you want in that <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>

or you may simply use the Jquery which provides formatting facilities also:-

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

I love the second option. It resolves all issues in one go.

小开

If you are using jquery ui then you may use it like below, you can specify your own date format

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

小开

u can use this coding

$('[name="tgllahir"]').val($.datepicker.formatDate('dd-mm-yy', new Date(data.tgllahir)));

小开

This worked for me with slight modification and without any plugin

Input : Wed Apr 11 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')

Output: 04/11/2018

小开

I have achieved through this, I have resolved this without any plugin or datepicker.

GetDatePattern("MM/dd/yyyy");
function GetDatePattern(pattern)
{
var monthNames=["January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"];
    

var todayDate = new Date();
                                              

var date = todayDate.getDate().toString();
var month = todayDate.getMonth().toString();
var year = todayDate.getFullYear().toString();
var formattedMonth = (todayDate.getMonth() < 10) ? "0" + month : month;
var formattedDay = (todayDate.getDate() < 10) ? "0" + date : date;
var result = "";
    

switch (pattern) {
case "M/d/yyyy":
formattedMonth = formattedMonth.indexOf("0") == 0 ? formattedMonth.substring(1, 2) : formattedMonth;
formattedDay = formattedDay.indexOf("0") == 0 ? formattedDay.substring(1, 2) : formattedDay;
    

result  = formattedMonth + '/' + formattedDay + '/' + year;
break;
    

case "M/d/yy":
formattedMonth = formattedMonth.indexOf("0") == 0 ? formattedMonth.substring(1, 2) : formattedMonth;
formattedDay = formattedDay.indexOf("0") == 0 ? formattedDay.substring(1, 2) : formattedDay;
result  = formattedMonth + '/' + formattedDay + '/' + year.substr(2);
break;
    

case "MM/dd/yy":
result  = formattedMonth + '/' + formattedDay + '/' + year.substr(2);
break;
    

case "MM/dd/yyyy":
result  = formattedMonth + '/' + formattedDay + '/' + year;
break;
    

case "yy/MM/dd":
result  = year.substr(2) + '/' + formattedMonth + '/' + formattedDay;
break;
    

    

case "yyyy-MM-dd":
result  = year + '-' + formattedMonth + '-' + formattedDay;
break;
    

case "dd-MMM-yy":
result  = formattedDay + '-' + monthNames[todayDate.getMonth()].substr(3) + '-' + year.substr(2);
break;
    

case "MMMM d, yyyy":
result  = todayDate.toLocaleDateString("en-us", { day: 'numeric', month: 'long', year: 'numeric' });
break;
    

    

}
}

小开

using Moment JS moment js

$("#YourDateInput").val(moment($("#YourDateInput").val()).format('YYYY-MM-DD'));