JQuery UI DatePicker - Изменить формат даты

Я использую 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?

+514
источник поделиться
27 ответов

Здесь один конкретный для вашего кода:

var date = $('#datepicker').datepicker({ dateFormat: 'dd-mm-yy' }).val();

Более общая информация доступна здесь:

+907
источник

внутри кода jQuery script просто вставьте код.

$( ".selector" ).datepicker({ dateFormat: 'yy-mm-dd' });

это должно работать.

+92
источник
другие ответы

Связанные вопросы


Похожие вопросы

getDate метод datepicker возвращает тип даты, а не строку.

Вам нужно отформатировать возвращаемое значение в строке, используя формат даты. Использовать функцию datepicker formatDate:

var dateTypeVar = $('#datepicker').datepicker('getDate');
$.datepicker.formatDate('dd-mm-yy', dateTypeVar);

Полный список спецификаторов формата доступен здесь.

+59
источник

Здесь полный код для выбора даты с форматом даты (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"/>
+33
источник

getDate функция возвращает дату JavaScript. Используйте следующий код для форматирования этой даты:

var dateObject = $("#datepicker").datepicker("getDate");
var dateString = $.datepicker.formatDate("dd-mm-yy", dateObject);

Он использует служебную функцию, которая встроена в datepicker:

$.datepicker.formatDate( format, date, settings ) - Отформатируйте дату в строковое значение с указанным форматом.

Полный список спецификаторов формата доступен здесь.

+18
источник

dateFormat

Формат разобранных и отображаемых дат. Этот атрибут является одним из атрибуты регионализации. Полный список возможных форматы видят функцию 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' );
+17
источник

$("#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
+9
источник
<script type="text/javascript">
  $(function() {
    $( "#date" ).datepicker( {minDate: '0', dateFormat: 'yy-dd-mm' } );
  });
</script>
+9
источник

Попробуйте использовать

$( ".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 
             }
      });
});
+8
источник

вы можете просто использовать этот формат в своей функции точно так же, как

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

<input type="text" id="datepicker"></p>
+6
источник

Если вам нужна дата в формате yy-mm-dd, вы можете использовать это: -

$("#datepicker").datepicker({ dateFormat: "yy-mm-dd" });

Вы можете найти все поддерживаемые форматы https://jqueryui.com/datepicker/#date-formats

Мне было нужно 06, декабрь 2015 года, я сделал это: -

$("#datepicker").datepicker({ dateFormat: "d M,y" });
+4
источник

Это тоже работает:

$("#datepicker").datepicker({
    dateFormat:'d-m-yy'
});
+4
источник
$("#datepicker").datepicker({ dateFormat: "yy-mm-dd" }).val()
+3
источник
<script>
    $(function() {  
        $("#datepicker").datepicker(); 
        $('#datepicker').datepicker('option', {dateFormat: 'd MM y'});
    }); 
    $("#startDate").datepicker({dateFormat: 'd MM y'}); 
</script>
+3
источник

Просто запустите эту 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>
+3
источник

Если вы настроили 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.

+2
источник

Я использую 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>
+2
источник

Это работает гладко. Попробуй это.

Вставьте эти ссылки в ваш головной раздел.

<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>
+2
источник

Наконец, получил ответ на метод изменения даты datepicker:

$('#formatdate').change(function(){
    $('#datpicker').datepicker("option","dateFormat","yy-mm-dd");
});
+1
источник

Я использую это:

var strDate = $("#dateTo").datepicker('getDate').format('yyyyMMdd');

Возвращает дату формата, например "20120118" для Jan 18, 2012.

+1
источник

Ниже код может помочь проверить, получили ли форму более 1 поля даты:

<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Datepicker - Display month &amp; 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>
+1
источник

Мой вариант приведен ниже:

$(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>
+1
источник

Я думаю, что правильный способ сделать это будет примерно таким:

var picker = $('.date-picker');
var date = $.datepicker.formatDate(
    picker.datepicker('option', 'dateFormat'),
    picker.datepicker('getDate'));

Таким образом, вы убедитесь, что строка формата определена только один раз, и вы используете тот же форматтер, чтобы перевести строку формата в форматированную дату.

0
источник

Ниже приведен фрагмент датированной даты в будущем. 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' );     
  }
});
0
источник

вы должны использовать data-date-format="yyyy-mm-dd" в своем поле ввода html и начальном сборщике данных в JQuery так же, как просто

$("#issue_date").datepicker({ 
    dateFormat: "yy-mm-dd",
    changeMonth: true,
    changeYear: true
});
0
источник

Вы можете добавить и попробовать этот способ:

HTML- файл:

<p><input type="text" id="demoDatepicker" /></p>

Файл JavaScript:

$(function() {  
    $("#demoDatepicker").datepicker({
        dateFormat: 'dd/mm/yy',
        changeMonth: true,
        changeYear: true,
        constrainInput: false
    });
});
0
источник

Вот что сработало для меня:

$.fn.datepicker.defaults.format = 'yy-mm-dd'
0
источник

Посмотрите другие вопросы по меткам или Задайте вопрос