Я использую UI DatePicker из jQuery UI в качестве отдельного сборщика. У меня есть этот код:
<div id="datepicker"></div>
И следующий JS:
$('#datepicker').datepicker();
Когда я пытаюсь вернуть значение с помощью этого кода:
var date = $('#datepicker').datepicker('getDate');
Я вернусь:
Tue Aug 25 2009 00:00:00 GMT+0100 (BST)
Это совершенно неправильный формат. Есть ли способ вернуть его в формате DD-MM-YYYY?
Здесь один конкретный для вашего кода:
var date = $('#datepicker').datepicker({ dateFormat: 'dd-mm-yy' }).val();
Более общая информация доступна здесь:
внутри кода jQuery script просто вставьте код.
$( ".selector" ).datepicker({ dateFormat: 'yy-mm-dd' });
это должно работать.
getDate метод datepicker возвращает тип даты, а не строку.
Вам нужно отформатировать возвращаемое значение в строке, используя формат даты.
Использовать функцию datepicker formatDate:
var dateTypeVar = $('#datepicker').datepicker('getDate');
$.datepicker.formatDate('dd-mm-yy', dateTypeVar);
Полный список спецификаторов формата доступен здесь.
Здесь полный код для выбора даты с форматом даты (yy/mm/dd).
Скопируйте ссылку ниже и вставьте в заголовок:
<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>
Скопируйте ниже код и вставьте между тегом тела:
Date: <input type="text" id="datepicker" size="30"/>
Если вам нужен два (2) типа ввода типа типа Start Date и End Date, используйте этот script и измените формат даты.
<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>
Два входных текста:
Start Date: <input type="text" id="startdate" size="30"/>
End Date: <input type="text" id="enddate" size="30"/>
getDate функция возвращает дату JavaScript. Используйте следующий код для форматирования этой даты:
var dateObject = $("#datepicker").datepicker("getDate");
var dateString = $.datepicker.formatDate("dd-mm-yy", dateObject);
Он использует служебную функцию, которая встроена в datepicker:
$.datepicker.formatDate( format, date, settings )- Отформатируйте дату в строковое значение с указанным форматом.
Полный список спецификаторов формата доступен здесь.
Формат разобранных и отображаемых дат. Этот атрибут является одним из атрибуты регионализации. Полный список возможных форматы видят функцию formatDate.
Примеры кода Инициализировать datepicker с помощью параметра dateFormat указано.
$( ".selector" ).datepicker({ dateFormat: 'yy-mm-dd' });Получить или установить параметр dateFormat после init.
//getter var dateFormat = $( ".selector" ).datepicker( "option", "dateFormat" ); //setter $( ".selector" ).datepicker( "option", "dateFormat", 'yy-mm-dd' );
$("#datepicker").datepicker("getDate") возвращает объект даты, а не строку.
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
<script type="text/javascript">
$(function() {
$( "#date" ).datepicker( {minDate: '0', dateFormat: 'yy-dd-mm' } );
});
</script>
Попробуйте использовать
$( ".selector" ).datepicker({ dateFormat: 'dd/mm/yy' });
и доступно много вариантов. Для datepicker вы можете найти его здесь.
http://api.jqueryui.com/datepicker/
Так мы называем datepicker параметром
$(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
}
});
});
вы можете просто использовать этот формат в своей функции точно так же, как
$(function() {
$( "#datepicker" ).datepicker({
dateFormat: 'dd/mm/yy',
changeMonth: true,
changeYear: true
});
});
<input type="text" id="datepicker"></p>
Если вам нужна дата в формате yy-mm-dd, вы можете использовать это: -
$("#datepicker").datepicker({ dateFormat: "yy-mm-dd" });
Вы можете найти все поддерживаемые форматы https://jqueryui.com/datepicker/#date-formats
Мне было нужно 06, декабрь 2015 года, я сделал это: -
$("#datepicker").datepicker({ dateFormat: "d M,y" });
Это тоже работает:
$("#datepicker").datepicker({
dateFormat:'d-m-yy'
});
$("#datepicker").datepicker({ dateFormat: "yy-mm-dd" }).val()
<script>
$(function() {
$("#datepicker").datepicker();
$('#datepicker').datepicker('option', {dateFormat: 'd MM y'});
});
$("#startDate").datepicker({dateFormat: 'd MM y'});
</script>
Просто запустите эту HTML-страницу, вы увидите несколько форматов.
<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>
Если вы настроили datepicker в элементе input[type="text"], вы можете не получить последовательно отформатированную дату, особенно если пользователь не придерживается формата даты для ввода данных.
Например, когда вы устанавливаете dateFormat как dd-mm-yy, а пользователь вводит 1-1-1. Datepicker преобразует это значение в Jan 01, 2001 внутренне, но вызов val() в объекте datepicker вернет строку "1-1-1" - точно то, что находится в текстовом поле.
Это означает, что вы должны либо подтвердить ввод пользователя, чтобы убедиться, что введенная дата находится в том формате, который вы ожидаете, либо не позволяете пользователю вводить даты произвольной формы (предпочитая вместо этого календаря). Несмотря на это, можно заставить код datepicker дать вам строку, отформатированную так, как вы ожидаете:
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"
Помните, однако, что, когда метод datepicker getDate() вернет дату, он может сделать это только с пользовательским вводом, который точно не соответствует формату даты. Это означает, что при отсутствии проверки можно получить дату назад, которая отличается от ожидаемой пользователем. Предостережение emptor.
Я использую jquery для datepicker. Эти jqueries используются для этого
<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">
Затем вы следуете этому коду,
<script>
jQuery(function() {
jQuery( "#date" ).datepicker({ dateFormat: 'dd/mm/yy' });
});
</script>
Это работает гладко. Попробуй это.
Вставьте эти ссылки в ваш головной раздел.
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
Ниже приводится кодировка JS.
<script>
$(document).ready(function () {
$('#completionDate').datepicker({
dateFormat: 'yy-mm-dd', // enter date format you prefer (e.g. 2018-10-09)
changeMonth: true,
changeYear: true,
yearRange: "-50:+10",
clickInput: true,
onSelect: function (date) {
loadMusterChit();
}
});
});
</script>
Наконец, получил ответ на метод изменения даты datepicker:
$('#formatdate').change(function(){
$('#datpicker').datepicker("option","dateFormat","yy-mm-dd");
});
Я использую это:
var strDate = $("#dateTo").datepicker('getDate').format('yyyyMMdd');
Возвращает дату формата, например "20120118" для Jan 18, 2012.
Ниже код может помочь проверить, получили ли форму более 1 поля даты:
<!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>
Мой вариант приведен ниже:
$(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>Я думаю, что правильный способ сделать это будет примерно таким:
var picker = $('.date-picker');
var date = $.datepicker.formatDate(
picker.datepicker('option', 'dateFormat'),
picker.datepicker('getDate'));
Таким образом, вы убедитесь, что строка формата определена только один раз, и вы используете тот же форматтер, чтобы перевести строку формата в форматированную дату.
Ниже приведен фрагмент датированной даты в будущем. Firefox по умолчанию использует jquery ui datepicker. В противном случае используется датпикер HTML5. Если FF когда-либо поддерживает тип HTML5 = "дата", script будет просто избыточным. Не забывайте, что три зависимости необходимы в теге заголовка.
<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' );
}
});
вы должны использовать data-date-format="yyyy-mm-dd" в своем поле ввода html и начальном сборщике данных в JQuery так же, как просто
$("#issue_date").datepicker({
dateFormat: "yy-mm-dd",
changeMonth: true,
changeYear: true
});
Вы можете добавить и попробовать этот способ:
HTML- файл:
<p><input type="text" id="demoDatepicker" /></p>
Файл JavaScript:
$(function() {
$("#demoDatepicker").datepicker({
dateFormat: 'dd/mm/yy',
changeMonth: true,
changeYear: true,
constrainInput: false
});
});
Вот что сработало для меня:
$.fn.datepicker.defaults.format = 'yy-mm-dd'