DateUpicker пользовательского интерфейса jQuery - Изменить формат даты - PullRequest
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 ]

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

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

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

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

94 голосов
/ 16 августа 2010

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

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

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

59 голосов
/ 25 ноября 2011

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

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

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

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

33 голосов
/ 28 января 2012

Здесь полный код для выбора даты в формате даты (гг / мм / дд).

Скопируйте ссылку ниже и вставьте в заголовок тег:

   <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, используйте этот скрипт и измените формат даты.

   <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"/>
18 голосов
/ 12 декабря 2012

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

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

Используется служебная функция, встроенная в указатель даты:

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

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

17 голосов
/ 21 июня 2010

DateFormat

Формат проанализированных и отображаемых дат. Этот атрибут является одним из атрибуты регионализации. Для полного списка возможных форматы см. в функции formatDate.

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

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

Получить или установить параметр dateFormat после инициализации.

//getter
var dateFormat = $( ".selector" ).datepicker( "option", "dateFormat" );
//setter
$( ".selector" ).datepicker( "option", "dateFormat", 'yy-mm-dd' );
9 голосов
/ 30 августа 2011

$("#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 голосов
/ 01 января 2015
<script type="text/javascript">
  $(function() {
    $( "#date" ).datepicker( {minDate: '0', dateFormat: 'yy-dd-mm' } );
  });
</script>
8 голосов
/ 07 марта 2016

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

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

, и для выбора даты вы можете найти множество опций.

http://api.jqueryui.com/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 
             }
      });
});
6 голосов
/ 06 января 2016

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

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

<input type="text" id="datepicker"></p>
...