DateUpicker пользовательского интерфейса jQuery - Изменить формат даты - PullRequest
Новая
       26

DateUpicker пользовательского интерфейса jQuery - Изменить формат даты

518 голосов
/ 25 августа 2009

Я использую пользовательский интерфейс 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?

Ответы [ 27 ]

1 голос
/ 19 января 2012

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

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

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

1 голос
/ 04 декабря 2012

Приведенный ниже код может помочь проверить, получено ли в форме больше 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>
0 голосов
/ 02 мая 2019

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

$.fn.datepicker.defaults.format = 'yy-mm-dd'
0 голосов
/ 29 мая 2018

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

HTML file: 

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

JavaScript file: 

$(function() {  
    $("#demoDatepicker").datepicker({
        dateFormat: 'dd/mm/yy',
        changeMonth: true,
        changeYear: true,
        constrainInput: false
    });
});
0 голосов
/ 18 марта 2018

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

$("#issue_date").datepicker({ 
    dateFormat: "yy-mm-dd",
    changeMonth: true,
    changeYear: true
});
0 голосов
/ 29 сентября 2017

Вот готовый фрагмент кода на будущее. Firefox по умолчанию использует jquery ui datepicker. В противном случае используется средство выбора даты HTML5. Если FF когда-либо поддерживает HTML5 type = "date", скрипт будет просто избыточен. Не забудьте, что в теге 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' );     
  }
});
0 голосов
/ 17 июля 2012

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

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

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

Страница:
...