jQuery UI DatePicker-Zmień Format daty
Używam DatePicker Ui z jQuery UI jako samodzielnego selektora. Mam ten kod:
<div id="datepicker"></div>
I następujące JS:
$('#datepicker').datepicker();
Kiedy próbuję zwrócić wartość z tym kodem:
var date = $('#datepicker').datepicker('getDate');
I am returned this:
Tue Aug 25 2009 00:00:00 GMT+0100 (BST)
Który jest całkowicie zły format. Czy jest jakiś sposób na zwrócenie go w formacie DD-MM-YYYY
?
25 answers
Oto jeden specyficzny dla Twojego kodu:
var date = $('#datepicker').datepicker({ dateFormat: 'dd-mm-yy' }).val();
Więcej ogólnych informacji dostępnych tutaj:
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-06-21 13:34:16
Wewnątrz kodu skryptu jQuery wystarczy wkleić kod.
$( ".selector" ).datepicker({ dateFormat: 'yy-mm-dd' });
To powinno zadziałać.Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-05-11 22:29:11
The getDate
metoda datepicker zwraca typ date, a nie string.
Musisz sformatować zwróconą wartość na łańcuch znaków używając swojego formatu daty.
Użyj funkcji formatDate
datepicker:
var dateTypeVar = $('#datepicker').datepicker('getDate');
$.datepicker.formatDate('dd-mm-yy', dateTypeVar);
Pełna lista formatów jest dostępna tutaj .
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-01-09 09:20:05
Tutaj kompletny kod do wyboru daty z formatem daty (yy/mm/dd).
Skopiuj link poniżej i wklej w znacznik head:
<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>
Skopiuj poniższy kod i wklej pomiędzy znacznikami body:
Date: <input type="text" id="datepicker" size="30"/>
Jeśli chcesz wprowadzić dwa(2) typy tekstu, takie jak Start Date
i End Date
, Użyj tego skryptu i zmień format daty.
<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>
Two input text like:
Start Date: <input type="text" id="startdate" size="30"/>
End Date: <input type="text" id="enddate" size="30"/>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-01-09 09:22:29
getDate
funkcja zwraca datę JavaScript. Użyj następującego kodu, aby sformatować tę datę:
var dateObject = $("#datepicker").datepicker("getDate");
var dateString = $.datepicker.formatDate("dd-mm-yy", dateObject);
Używa funkcji użytkowej, która jest wbudowana w datepicker:
$.datepicker.formatDate( format, date, settings )
- Sformatuj datę na wartość łańcuchową o określonym formacie.
Pełna lista formatów jest dostępna tutaj .
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-01-21 09:13:48
Format przetwarzanych i wyświetlanych dat. Atrybut ten jest jednym z cechy regionalizacji. Aby uzyskać pełną listę możliwych formaty patrz funkcja formatDate.
Przykłady kodu Inicjalizuj datepicker opcją dateFormat określone.
$( ".selector" ).datepicker({ dateFormat: 'yy-mm-dd' });
Get lub set the dateFormat option, after init.
//getter var dateFormat = $( ".selector" ).datepicker( "option", "dateFormat" ); //setter $( ".selector" ).datepicker( "option", "dateFormat", 'yy-mm-dd' );
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-01-09 09:16:43
$("#datepicker").datepicker("getDate")
zwraca obiekt date, a nie Łańcuch znaków.
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
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-08-30 09:08:45
<script type="text/javascript">
$(function() {
$( "#date" ).datepicker( {minDate: '0', dateFormat: 'yy-dd-mm' } );
});
</script>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-10-06 09:54:33
Spróbuj użyć
$( ".selector" ).datepicker({ dateFormat: 'dd/mm/yy' });
I jest wiele opcji dostępnych dla datepicker można znaleźć tutaj
http://api.jqueryui.com/datepicker/
Tak nazywamy datepicker z parametrem
$(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
}
});
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-03-07 12:53:36
Możesz po prostu użyć tego formatu w swojej funkcji tak jak
$(function() {
$( "#datepicker" ).datepicker({
dateFormat: 'dd/mm/yy',
changeMonth: true,
changeYear: true
});
});
<input type="text" id="datepicker"></p>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-01-06 10:17:34
To też działa:
$("#datepicker").datepicker({
dateFormat:'d-m-yy'
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-12-11 12:55:29
Jeśli potrzebujesz daty w formacie yy-mm-dd, możesz użyć tego: -
$("#datepicker").datepicker({ dateFormat: "yy-mm-dd" });
Możesz znaleźć wszystkie obsługiwane formaty https://jqueryui.com/datepicker/#date-formats
I was in need of 06, Dec 2015, I did this: -
$("#datepicker").datepicker({ dateFormat: "d M,y" });
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-12-06 09:26:05
$("#datepicker").datepicker({ dateFormat: "yy-mm-dd" }).val()
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-05-11 22:29:01
<script>
$(function() {
$("#datepicker").datepicker();
$('#datepicker').datepicker('option', {dateFormat: 'd MM y'});
});
$("#startDate").datepicker({dateFormat: 'd MM y'});
</script>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-11-19 04:34:20
Po prostu uruchom tę stronę HTML, możesz zobaczyć kilka formatów.
<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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-06-17 09:52:48
Jeśli ustawisz datepicker na elemencie input[type="text"]
, możesz nie uzyskać konsekwentnie sformatowanej daty, szczególnie gdy użytkownik nie przestrzega formatu daty dla wprowadzania danych.
Na przykład, gdy ustawisz dateFormat jako dd-mm-yy
i typy użytkownika 1-1-1
. Datepicker przekonwertuje to do Jan 01, 2001
wewnętrznie, ale wywołanie val()
na obiekcie datepicker zwróci łańcuch "1-1-1"
-- dokładnie to, co znajduje się w polu tekstowym.
Oznacza to, że należy albo sprawdzać poprawność danych wejściowych użytkownika do upewnij się, że wprowadzona Data jest w formacie, którego oczekujesz lub nie pozwalasz użytkownikowi na dowolne wprowadzanie dat (preferując zamiast tego selektor kalendarza). Nawet jeśli jest możliwe wymusić kod datepicker, aby dać ci ciąg sformatowany tak, jak oczekujesz:
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"
Należy jednak pamiętać, że podczas gdy metoda datepicker getDate()
zwróci datę, może zrobić tylko tyle z danymi wejściowymi użytkownika, które nie pasują do formatu daty. Oznacza to, że w przypadku braku walidacji możliwe jest uzyskanie Data wstecz, która różni się od tego, czego oczekuje użytkownik. Caveat emptor.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-05-14 18:48:00
Używam jquery dla datepicker.Te jqueries są używane do tego
<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">
Następnie postępuj zgodnie z tym kodem,
<script>
jQuery(function() {
jQuery( "#date" ).datepicker({ dateFormat: 'dd/mm/yy' });
});
</script>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-10-22 12:09:26
Wreszcie otrzymałem odpowiedź dla metody zmiany daty datepicker:
$('#formatdate').change(function(){
$('#datpicker').datepicker("option","dateFormat","yy-mm-dd");
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-08-08 09:24:26
Używam tego:
var strDate = $("#dateTo").datepicker('getDate').format('yyyyMMdd');
, która zwraca datę w formacie "20120118
" dla Jan 18, 2012
.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-10-28 04:54:43
Poniższy kod może pomóc w sprawdzeniu, czy formularz ma więcej niż 1 pole daty:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Display month & 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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-12-04 20:15:03
Moja opcja jest podana poniżej:
$(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>
Myślę, że poprawnym sposobem na zrobienie tego byłoby coś takiego:
var picker = $('.date-picker');
var date = $.datepicker.formatDate(
picker.datepicker('option', 'dateFormat'),
picker.datepicker('getDate'));
W ten sposób upewniasz się, że format string jest zdefiniowany tylko raz i używasz tego samego formatera, aby przetłumaczyć format string na sformatowaną datę.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-07-17 11:31:38
Oto wyjęty z pudełka fragment daty future proof. Firefox domyślnie jQuery UI datepicker. W przeciwnym razie używany jest datepicker HTML5. Jeśli FF kiedykolwiek obsługuje HTML5 type = "date" skrypt będzie po prostu zbędny. Nie zapomnij, że trzy zależności są potrzebne w znaczniku head.
<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' );
}
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-09-29 02:46:56
Możesz dodać i spróbować w ten sposób:
Plik HTML :
<input type="text" id="demoDatepicker"></p>
JavaScript plik:
$(function() {
$("#demoDatepicker").datepicker({
dateFormat: 'dd/mm/yy',
changeMonth: true,
changeYear: true,
constrainInput: false
});
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-05-29 13:25:28
Powinieneś używać data-date-format="yyyy-mm-dd"
w polu wejściowym html i początkowego selektora danych w JQuery tak jak simple
$("#issue_date").datepicker({
dateFormat: "yy-mm-dd",
changeMonth: true,
changeYear: true
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-08-02 09:36:06