jQuery 날짜 형식


186

jQuery를 사용하여 날짜 형식을 지정하는 방법 아래 코드를 사용하고 있지만 오류가 발생합니다.

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

해결책을 제안하십시오.


1
Microsoft JScript 런타임 오류 : '$ .format'이 null이거나 객체가 아닙니다
DotnetSparrow

포맷 기능이 포함 된 플러그인을 포함 시켰습니까?
zzzzBov

39
yyyy-mm-dd를위한 몰래 하나의 라이너 :new Date().toJSON().substring(0,10)
Mike Causer

그것은 fformat (double f)
jorrebor

10
경고! 매끄러운 코드 : 훌륭하게 new Date().toJSON().substring(0,10)작동했지만 날짜를 GMT로 반환합니다! 우리가 GMT보다 7 시간 늦었 기 때문에 오후 5시 이후에 잘못된 날짜가 나타났습니다. 방금 원인 / sigh /를 찾는 데 몇 시간을 낭비했습니다. 참조
JayRO-GreyBeard 3

답변:


103

jQuery dateFormat 은 별도의 플러그인입니다. <script>태그를 사용하여 명시 적으로로드해야합니다 .


10
@Dotnet, 다른 기능 사용 : 예 : 여기
Pekka

33
@Dotnet jQuery를 사용하여 수행 할 수 있다면 날짜 형식 지정을위한 jQuery 플러그인이 없을까요?
Pekka

1
나는 이것이 농담인지 아닌지 알 수 없다 ... 거의 @pekka입니다. 또한 정답입니다.
jcolebrand

1
jQuery dateFormat은 jQuery Validate와 작동하지 않습니다. 순수한 JavaScript 버전도 아닙니다.
Kunal B.

3
vanilla jQuery에는 날짜 형식을 지정하는 기능이 없다고 믿기 어렵습니다. 이 질문은 5 살입니다. 여전히 그렇습니까?
felwithe

212

페이지에 jquery ui 플러그인을 추가하십시오.

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

2
이것은 내가 다른 곳에서 jQuery UI를 사용하고 있기 때문에 내가 찾은 대답입니다.
nzifnab

날짜 + 2 년을 얻는 방법이 있습니까?
Serjas

1
var currentDate = 새 날짜 (); currentDate.setFullYear (currentDate.getFullYear () + 2);
Thulasiram

시간 형식을 지원하지 않는 것은 미안합니다 = S
Thomas

4
공식 문서에 대한 링크는 다음과 같습니다. api.jqueryui.com/datepicker/#utility-formatDate
기 illa Husta

101

jQuery / jQuery 플러그인을 사용하지 않으려면 간단한 js date () 함수를 사용하십시오.

예 :

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

참조 : JavaScript를 사용하여 시간 및 날짜를 ​​형식화하는 10 가지 방법

일 / 월에 선행 0을 추가하려는 경우 이는 완벽한 예입니다. Javascript는 선행 0을 날짜에 추가합니다

그리고 선행 0으로 시간을 추가하려면 다음을 시도하십시오 : getMinutes () 0-9-두 숫자를 사용하는 방법?


@sein처럼 초를 추가하는 것이 편리합니다
wpcoder

사용자가 최근 날짜를 원하거나 Date개체에 날짜가 입력 될 때까지 유효 합니다. 먹이를 먹기 6 개월 전에 같은 형식으로 날짜를 얻는 것은 어떻습니까?
Sanjok Gurung

31

외부 플러그인이 필요없는 방금 만든 기본 기능은 다음과 같습니다.

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

사용하다:

$.date(yourDateObject);

결과:

dd/mm/yyyy

27

ThulasiRam, 나는 당신의 제안을 선호합니다. 약간 다른 구문 / 컨텍스트에서 나를 위해 잘 작동합니다.

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

JQuery UI 에서 날짜 선택기를 사용하기로 결정한 경우 문서의 <head> 섹션에서 올바른 참조를 사용해야합니다.

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

25

내가 사용하고 있습니다 모멘트 JS를 . 매우 유용하고 사용하기 쉽습니다.

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

나는 user3812343에 동의합니다! Moment JS는 훌륭합니다. .NET 구문을 다루는 사람들이 쉽게 흡수 할 수 있습니다.
도미니크 라스

년 월 일시 분 초 필요?
Chaitanya Desai

15

이 코드가 문제를 해결하기를 바랍니다.

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)

8

jquery ui를 사용하는 경우 아래와 같이 사용할 수 있습니다. 자체 날짜 형식을 지정할 수 있습니다

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

7

이것을 사용하십시오 :

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

1
date.getMonth ()는 0부터 시작하는 인덱스이므로 1 개월에 액세스하지 않는 한 (이 경우 1 월에 '00'을 제공하지 않는 한) 지난 1 개월의 날짜를 제공합니다.
jaybrau 2016 년

7

이 기능을 당신에게 추가 <script></script>하고 원하는 곳에서 전화 하십시오.<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>

또는 단순히 형식 지정 기능을 제공하는 Jquery를 사용할 수도 있습니다.

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

나는 두 번째 옵션을 좋아합니다. 한 번에 모든 문제를 해결합니다.


1
그 두 번째 옵션은 "radix 인수는 Number.toString에서 2와 36 사이 여야합니다."입니다. 충돌합니다.
IRGeekSauce

6

이 질문은 몇 년 전에 요청되었지만 문제의 날짜 값이 형식이있는 문자열 mm/dd/yyyy(예 : 날짜 선택기를 사용할 때) 인 경우 jQuery 플러그인은 더 이상 필요하지 않습니다 .

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)

5

새 사용자 jQuery 함수 'getDate'를 추가 할 수 있습니다

JSFiddle : getDate jQuery

또는 코드 스 니펫을 실행할 수 있습니다. 이 게시물 아래의 "코드 스 니펫 실행"버튼을 누르십시오.

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

즐겨!


4

이 스 니펫을 사용할 수 있습니다

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


4

간단히 날짜를 형식화 할 수 있습니다.

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

여기서 "날짜"는 모든 형식의 날짜입니다.



1

날짜 선택기를 만들 때 dateFormat 옵션을 사용하십시오.

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

1

플러그인없이 아래 코드를 사용할 수 있습니다.

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


1

이것은 약간의 수정과 플러그인없이 저에게 효과적이었습니다.

입력 : 수 4 월 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')

출력 : 04/11/2018


0

2 년 전과 같은 질문에 대답 할 수 있는지 확실하지 않습니다. 스택 오버플로에 대한 첫 번째 대답이지만 여기에 내 해결책이 있습니다.

MySQL 데이터베이스에서 날짜를 한 번 검색 한 경우 날짜를 분할 한 다음 분할 된 값을 사용하십시오.

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

여기 바이올린이 있습니다.


0

다음은 브라우저에서 보여준 전체 코드 예제입니다. 도움을 주셔서 감사합니다.

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


-1

이 코딩을 사용할 수 있습니다

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

2
코드 전용 답변은 문제 해결 방법을 설명하지 않기 때문에 권장하지 않습니다. 이 질문이 이미 가지고있는 다른 많은 승인 및 공표 된 답변에서 어떻게 개선되는지 설명하려면 답변을 업데이트하십시오. 또한이 질문은 6 살입니다. 최근 답변하지 않은 질문이있는 사용자가 노력해 주셔서 감사합니다. 좋은 답변을 작성하려면 어떻게합니까?를 검토하십시오 .
FluffyKitten

1
jQuery를 UI를 언급하지 않았다 대답이 필요했다
sean2078
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.