jQuery UI DatePicker - змінення формату дати

Я використовую UI DatePicker від інтерфейсу jQuery як самостійний вибирач. У мене є цей код:

<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?

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

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

Більш загальна інформація доступна тут:

• http://api.jqueryui.com/datepicker/#option-dateFormat
• http://api.jqueryui.com/datepicker/#utility-formatDate

всередині коду сценарію jQuery просто вставте його.

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

це має працювати.

getDateМетод DatePicker повертає тип дати, а не рядки.

Потрібно відформатувати повернене значення у рядок, використовуючи формат дати. Використовуйте formatDateфункцію вибору дат :

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

Повний список специфікаторів формату доступний тут .

Тут подано повний код для вибору дати з форматом дати (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>

Скопіюйте код нижче та вставте між тегом body:

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

формат дати

Формат для розбору та відображених дат. Цей атрибут є одним із атрибутів регіоналізації. Повний список можливих форматів див. У форматі formatDate.

Приклади коду Ініціалізуйте підбирач дат із вказаною опцією dateFormat.

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

Отримайте або встановіть опцію dateFormat після init.

//getter
var dateFormat = $( ".selector" ).datepicker( "option", "dateFormat" );
//setter
$( ".selector" ).datepicker( "option", "dateFormat", 'yy-mm-dd' );

getDateфункція повертає дату JavaScript. Використовуйте наступний код для форматування цієї дати:

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

Він використовує функцію утиліти, яка вбудована в датчик:

$.datepicker.formatDate( format, date, settings ) - Відформатуйте дату у значення рядка із заданим форматом.

Повний список специфікаторів формату доступний тут .

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

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

Спробуйте використовувати

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

ви можете просто використовувати цей формат, як ви функціонуєте так само

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

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

Якщо вам потрібна дата у форматі yy-mm-dd, ви можете скористатися цією функцією: -

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

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

Мені було потрібно 06 грудня 2015 року, я зробив це:

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

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

Просто запустіть цю сторінку 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>

Це також працює:

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

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

Це працює безперебійно. Спробуйте це.

Вставте ці посилання у розділ голови.

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

Якщо ви встановите панель вибору дати на input[type="text"]елемент, можливо, ви не отримаєте послідовно відформатовану дату, особливо коли користувач не дотримується формату дати для введення даних.

Наприклад, коли ви встановлюєте dateFormat як dd-mm-yyі типи користувачів 1-1-1. Вибір дат перетворить це у 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 поверне дату, він може зробити стільки, коли користувальницькі дані не точно відповідають формату дати. Це означає, що за відсутності перевірки можливо повернути дату, яка відрізняється від того, що очікує користувач. Caveat emptor .

Я використовую jquery для datepicker. Ці jquery використовуються для цього

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

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

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

Нарешті отримав відповідь щодо способу зміни дати вибору дати:

$('#formatdate').change(function(){
    $('#datpicker').datepicker("option","dateFormat","yy-mm-dd");
});

Я використовую це:

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

Який повертає дату у форматі " 20120118" для Jan 18, 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>

Я думаю, що правильний спосіб зробити це було б приблизно так:

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

Таким чином ви переконайтеся, що рядок формату визначено лише один раз, і ви використовуєте той самий форматтер, щоб перевести рядок формату у форматну дату.

Ось нестандартний фрагмент майбутньої перевірки дати. За замовчуванням 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' );     
  }
});

ви повинні використовувати data-date-format="yyyy-mm-dd"у своєму полі введення html та вибір початкових даних у JQuery так само просто

$("#issue_date").datepicker({ 
    dateFormat: "yy-mm-dd",
    changeMonth: true,
    changeYear: true
});

Ви можете додати та спробувати таким чином:

HTML- файл:

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

Файл JavaScript :

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

Це для мене працювало:

$.fn.datepicker.defaults.format = 'yy-mm-dd'

Тому я боровся з цим і думав, що я зійшов з розуму, річ у тому, що завантажувач дати завантажувача впроваджувався не jQuery, тож варіанти були різними;

$('.dateInput').datepicker({  format: 'dd/mm/yyyy'})