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

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 ]

4 голосов
/ 06 декабря 2015

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

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

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

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

$("#datepicker").datepicker({ dateFormat: "d M,y" });
4 голосов
/ 11 декабря 2015

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

$("#datepicker").datepicker({
    dateFormat:'d-m-yy'
});
3 голосов
/ 17 июня 2013

Просто запустите эту 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 голосов
/ 19 ноября 2012 
<script>
    $(function() {  
        $("#datepicker").datepicker(); 
        $('#datepicker').datepicker('option', {dateFormat: 'd MM y'});
    }); 
    $("#startDate").datepicker({dateFormat: 'd MM y'}); 
</script>
3 голосов
/ 11 мая 2011 
$("#datepicker").datepicker({ dateFormat: "yy-mm-dd" }).val()
2 голосов
/ 22 октября 2014

Я использую 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 голосов
/ 14 мая 2013

Если вы настроили средство выбора даты на элементе input[type="text"], вы можете не получить постоянно отформатированную дату, особенно если пользователь не следует формату даты для ввода данных.

Например, когда вы устанавливаете dateFormat как dd-mm-yy и пользователь вводит 1-1-1. Datepicker преобразует это в Jan 01, 2001 внутренне, но вызов val() для объекта datepicker вернет строку "1-1-1" - именно то, что находится в текстовом поле.

Это означает, что вы должны либо проверять введенные пользователем данные, чтобы убедиться, что введенная дата соответствует ожидаемому формату, либо не разрешать пользователю вводить даты произвольной формы (предпочтительнее вместо выбора календаря). Даже в этом случае можно заставить код средства выбора даты выдавать строку, отформатированную так, как вы ожидаете: 

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"

Имейте в виду, однако, что хотя метод getDate() средства DatePicker будет возвращать дату, он может делать очень многое только с пользовательским вводом, который точно не соответствует формату даты. Это означает, что при отсутствии проверки можно получить дату, отличную от ожидаемой пользователем. Предостережение emptor .

2 голосов
/ 29 октября 2018

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

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

<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>
1 голос
/ 05 декабря 2017

Мой вариант указан ниже: 

$(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 голос
/ 11 июня 2011

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

$('#formatdate').change(function(){
    $('#datpicker').datepicker("option","dateFormat","yy-mm-dd");
});
Страница:
...