Форматування дати jQuery

186

Як я можу відформатувати дату за допомогою jQuery. Я використовую код нижче, але отримую помилку:

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

Просимо запропонувати рішення.

jquery

— DotnetSparrow
джерело

1

Помилка виконання Microsoft JScript: '$ .format' є недійсним або не є об'єктом

— DotnetSparrow

Ви включили плагін, який включає функції форматування?

— zzzzBov

39

Підлий один вкладиш для yyyy-mm-dd:new Date().toJSON().substring(0,10)

— Mike Causer

це fformat (подвійний f)

— jorrebor

10

УВАГА! гладкий код: new Date().toJSON().substring(0,10)добре працював, але він повертає дату як GMT! Оскільки ми відстали на 7 годин за GMT, я отримав неправильну дату після 17:00. Я просто витратив пару годин на пошук причини / зітхання /. Довідка

— JayRO-GreyBeard

103

jQuery dateFormat - це окремий плагін. Вам потрібно завантажити це явно за допомогою <script>тегу.

— Пекка
джерело

10

@ Упевнений, використовуючи інші функції: Дивіться, наприклад, тут

— Pekka

33

@Dotnet, якщо це можна зробити за допомогою jQuery, не було б плагіна jQuery для форматування дати, чи не буде?

— Pekka

1

Я не можу сказати, це має бути жарт чи ні ... це майже геніально @pekka. Також це правильна відповідь.

— jcolebrand

1

jQuery dateFormat не працює з jQuery Validate. Ні чистої версії JavaScript.

— Kunal B.

3

Важко повірити, що ванільний jQuery не має функції форматування дати. Це питання 5 років, це все-таки так?

— квітня

212

додати плагін jquery ui на свою сторінку.

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

— Туласірам
джерело

2

Це відповідь, яку я шукав, тим більше, що я користуюся інтерфейсом jQuery в інших місцях.

— nzifnab

Чи є спосіб отримати побачення + 2 роки?

— Serjas

1

var currentDate = нова дата (); currentDate.setFullYear (currentDate.getFullYear () + 2);

— Туласірам

прикро, що він не підтримує форматування часу = S

— Томас,

4

Ось посилання на офіційний документ: api.jqueryui.com/datepicker/#utility-formatДата

— Гійом Хуста

101

Альтернативою може бути проста функція js date (), якщо ви не хочете використовувати плагін jQuery / jQuery:

наприклад:

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

див. 10 способів форматування часу та дати за допомогою JavaScript

Якщо ви хочете додати нульові нулі до дня / місяця, це прекрасний приклад: Javascript додає нульові нулі на сьогоднішній день

і якщо ви хочете додати час з провідними нулями, спробуйте це: getMinutes () 0-9 - як з двома числами?

— Паскаль
джерело

буде зручно додавати секунди, як це робив

— @sein

Це добре до тих пір, поки користувач не захоче останньої дати або дати вводиться в 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 , переконайтеся, що ви використовуєте належні посилання в розділі <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

Я використовую Moment JS . Дуже корисний і простий у використанні.

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

— Джонатаскф
джерело

Я погоджуюся з користувачем3812343! Момент JS чудовий - дуже легко засвоюється тими, хто працював із синтаксисом .NET.

— Домінік Рас

потрібен рік року місяць день година хвилина секунда?

— Чайтанья Дезай

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)

— Sein Navarro
джерело

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

Зауважте, це дає вам дату, що минула один місяць (якщо тільки в ній немає доступу в січні; в цьому випадку ви даєте "00" за місяць), оскільки date.getMonth () - нульовий індекс.

— jaybrau

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

Я люблю другий варіант. Він вирішує всі питання за один раз.

— user8373067
джерело

1

Цей другий варіант дає мені "аргумент radix повинен бути від 2 до 36 в Number.toString". Він розбивається.

— IRGeekSauce

6

Хоча це питання було задано кілька років тому, плагін jQuery більше не потрібен, якщо вказане значення дати є рядком з форматом mm/dd/yyyy(наприклад, під час вибору дати);

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>

Розгорніть фрагмент

Насолоджуйтесь!

— користувач3439968
джерело

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

Де "дата" - дата в будь-якому форматі.

— іцмебібін
джерело

3

Подивіться тут:

https://github.com/mbitto/jquery.i18Зараз

Цей плагін jQuery допомагає вам форматувати та перекладати дату та час відповідно до ваших уподобань.

— Мануель Бітто
джерело

1

Використовуйте параметр dateFormat під час створення вибору дати.

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

— deenfirdoush
джерело

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

Це працювало для мене з незначною модифікацією та без будь-якого плагіна

Вхід: ср квітня 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')

Вихід: 11.04.2018

— Ашоккумар С
джерело

0

Я не зовсім впевнений, чи мені дозволяють відповісти на запитання, яке було задано як 2 роки тому, оскільки це моя перша відповідь на stackoverflow, але ось моє рішення;

Якщо ви один раз отримали дату зі своєї бази даних 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>

— Камлеш
джерело

0

Ви можете спробувати http://www.datejs.com/

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

BR

— Condemateguadua
джерело

-1

Ви можете використовувати це кодування

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

— Енданг Таряна
джерело

2

Відповіді, що стосуються лише коду, відмовляються, оскільки вони не пояснюють, як вони вирішують проблему. Будь ласка, оновіть свою відповідь, щоб пояснити, як це покращується щодо багатьох інших прийнятих та схвалених відповідей, на які вже є це питання. Крім того, цьому питанню 6 років, ваші зусилля будуть більш оцінені користувачами, які мають останні запитання без відповіді. Будь ласка, перегляньте Як написати гарну відповідь .

— FluffyKitten

1

У відповіді не було

— вказано