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

внутри кода 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="//jquery-ui.css" rel="stylesheet" type="text/css"/>  
   <script src="/jquery.min.js"></script>  
   <script src="/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="//jquery-ui.css" rel="stylesheet" type="text/css"/>  
   <script src="/jquery.min.js"></script>  
   <script src="/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 ) - Отформатируйте дату в строковое значение с указанным форматом.

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

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' );

<script type="text/javascript">
  $(function() {
    $( "#date" ).datepicker( {minDate: '0', dateFormat: 'yy-dd-mm' } );
  });
</script>

$("#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

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

$( ".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>

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

$("#datepicker").datepicker({
    dateFormat:'d-m-yy'
});

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

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

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

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

$("#datepicker").datepicker({ dateFormat: "d M,y" });

Я использую jquery для datepicker. Эти jqueries используются для этого

<script src="/jquery-1.6.2.min.js"></script>
<script src="/jquery-ui-1.8.15.custom.min.js"></script>
<link rel="stylesheet" href="/jqueryCalendar.css">

Затем вы следуете этому коду,

<script>
     jQuery(function() {
     jQuery( "#date" ).datepicker({ dateFormat: 'dd/mm/yy' });
                });
</script>

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

<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Format date</title>
<link rel="stylesheet" href="//jquery-ui.css" />
<script src="/jquery-1.9.1.js"></script>
<script src="//jquery-ui.js"></script>
<link rel="stylesheet" href="//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>

<script>
    $(function() {  
        $("#datepicker").datepicker(); 
        $('#datepicker').datepicker('option', {dateFormat: 'd MM y'});
    }); 
    $("#startDate").datepicker({dateFormat: 'd MM y'}); 
</script>

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

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

$(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="/jquery-ui.min.css">
    <script src="/jquery-3.2.1.min.js"></script>
    <script src="/jquery-ui.min.js"></script>
    <script src="/jquery-ui-i18n.min.js"></script>
</head>
<body>
<h3>Japanese JQuery UI Datepicker</h3>
<input type="text" id="japaneseCalendar"/>

</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.

Ниже код может помочь проверить, получили ли форму более 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>

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

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

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

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

$('#formatdate').change(function(){
    $('#datpicker').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
});

Ниже приведен фрагмент датированной даты в будущем. Firefox по умолчанию использует jquery ui datepicker. В противном случае используется датпикер HTML5. Если FF когда-либо поддерживает тип HTML5 = "дата", script будет просто избыточным. Не забывайте, что три зависимости необходимы в теге заголовка.

<script>
  src="/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' );     
  }
});

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

HTML- файл:

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

Файл JavaScript:

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

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

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

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