Giao diện người dùng jQuery DatePicker - Thay đổi định dạng ngày

Tôi đang sử dụng UI DatePicker từ jQuery UI làm công cụ chọn độc lập. Tôi có mã này:

<div id="datepicker"></div>

Và mã sau:

$('#datepicker').datepicker();

Khi tôi cố gắng trả về giá trị với mã này:

var date = $('#datepicker').datepicker('getDate');

Tôi được trả lại này:

Tue Aug 25 2009 00:00:00 GMT+0100 (BST)

Đó là định dạng hoàn toàn sai. Có cách nào tôi có thể lấy nó ở định dạng DD-MM-YYYYkhông?

Đây là một mã cụ thể cho mã của bạn:

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

Thêm thông tin chung có sẵn ở đây:

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

bên trong mã script jQuery chỉ cần dán mã.

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

cái này nên hoạt động

Các getDatephương pháp datepicker trả về một kiểu ngày tháng, không phải là một chuỗi.

Bạn cần định dạng giá trị trả về thành một chuỗi bằng định dạng ngày của bạn. Sử dụng formatDatechức năng ghi ngày:

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

Danh sách đầy đủ các định dạng định dạng có sẵn ở đây .

Ở đây mã hoàn chỉnh cho bộ chọn ngày với định dạng ngày (yy / mm / dd).

Sao chép liên kết dưới đây và dán vào thẻ head:

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

Sao chép mã bên dưới và dán giữa thẻ body:

      Date: <input type="text" id="datepicker" size="30"/>    

Nếu bạn muốn hai (2) văn bản loại đầu vào thích Start Datevà End Datesau đó sử dụng tập lệnh này và thay đổi định dạng ngày.

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

Hai văn bản đầu vào như:

      Start Date: <input type="text" id="startdate" size="30"/>    
      End Date: <input type="text" id="enddate" size="30"/>

Định dạng ngày tháng

Các định dạng cho ngày được phân tích cú pháp và hiển thị. Thuộc tính này là một trong những thuộc tính khu vực hóa. Để biết danh sách đầy đủ các định dạng có thể, hãy xem hàm formatDate.

Các ví dụ mã Khởi tạo một công cụ hẹn hò với tùy chọn dateFormat được chỉ định.

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

Nhận hoặc đặt tùy chọn dateFormat, sau init.

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

getDateHàm trả về một ngày JavaScript. Sử dụng mã sau để định dạng ngày này:

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

Nó sử dụng một chức năng tiện ích được tích hợp vào datepicker:

$.datepicker.formatDate( format, date, settings ) - Định dạng một ngày thành một giá trị chuỗi với định dạng được chỉ định.

Danh sách đầy đủ các định dạng định dạng có sẵn ở đây .

$("#datepicker").datepicker("getDate") trả về một đối tượng ngày, không phải là một chuỗi.

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>

Cố gắng sử dụng

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

và có rất nhiều tùy chọn có sẵn cho người hẹn hò, bạn có thể tìm thấy nó ở đây

http://api.jqueryui.com/datepicker/

Đây là cách chúng ta gọi datepicker với tham số

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

bạn chỉ có thể sử dụng định dạng này trong chức năng của bạn giống như

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

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

Nếu bạn cần ngày ở định dạng yy-mm-dd, bạn có thể sử dụng:

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

Bạn có thể tìm thấy tất cả các định dạng được hỗ trợ https://jqueryui.com/datepicker/#date-formats

Tôi cần ngày 06 tháng 12 năm 2015, tôi đã làm điều này: -

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

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

Chỉ cần chạy trang HTML này, bạn có thể thấy một số định dạng.

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

Điều này cũng hoạt động:

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

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

Điều này hoạt động trơn tru. Thử cái này.

Dán các liên kết này trong phần đầu của bạn.

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

Sau đây là mã hóa 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>

Nếu bạn thiết lập một ngày tháng trên một input[type="text"]yếu tố, bạn có thể không nhận được một ngày được định dạng nhất quán, đặc biệt khi người dùng không tuân theo định dạng ngày để nhập dữ liệu.

Ví dụ: khi bạn đặt dateFormat là dd-mm-yyvà loại người dùng 1-1-1. Datepicker sẽ chuyển đổi cái này sang Jan 01, 2001bên trong nhưng việc gọi val()đối tượng datepicker sẽ trả về chuỗi "1-1-1"- chính xác là những gì trong trường văn bản.

Điều này ngụ ý rằng bạn nên xác thực đầu vào của người dùng để đảm bảo ngày đã nhập theo định dạng bạn mong đợi hoặc không cho phép người dùng nhập ngày miễn phí (thay vì chọn công cụ chọn lịch). Mặc dù vậy nó là tốt để buộc các mã datepicker để cung cấp cho bạn một chuỗi định dạng giống như bạn mong đợi:

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"

Tuy nhiên, hãy lưu ý rằng mặc dù getDate()phương thức của bộ đếm ngày sẽ trả về một ngày, nhưng nó chỉ có thể làm được rất nhiều với đầu vào của người dùng không khớp chính xác với định dạng ngày. Điều này có nghĩa là trong trường hợp không có xác nhận, có thể lấy lại ngày khác với những gì người dùng mong đợi. Emptor caveat .

Tôi đang sử dụng jquery cho datepicker. Những jqueries này được sử dụng cho điều đó

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

Sau đó, bạn làm theo mã này,

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

Tùy chọn của tôi được đưa ra dưới đây:

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

Cuối cùng cũng có câu trả lời cho phương pháp thay đổi ngày tháng:

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

Tôi sử dụng cái này:

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

Trả về một ngày định dạng như " 20120118" cho Jan 18, 2012.

Mã bên dưới có thể giúp kiểm tra xem biểu mẫu có nhiều hơn 1 ngày không:

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

Tôi nghĩ rằng cách chính xác để làm điều này sẽ là một cái gì đó như thế này:

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

Bằng cách này, bạn đảm bảo chuỗi định dạng chỉ được xác định một lần và bạn sử dụng cùng một trình định dạng để dịch chuỗi định dạng thành ngày được định dạng.

Đây là một đoạn trích trong ngày bằng chứng trong tương lai. Firefox mặc định là jpery ui datepicker. Nếu không, ngày tháng HTML5 được sử dụng. Nếu FF từng hỗ trợ HTML5 type = "date", tập lệnh sẽ đơn giản là dự phòng. Đừng quên ba phụ thuộc là cần thiết trong thẻ đầu.

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

bạn nên sử dụng data-date-format="yyyy-mm-dd"trong html trường nhập và bộ chọn dữ liệu ban đầu trong JQuery giống như đơn giản

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

Bạn có thể thêm và thử theo cách này:

Tệp HTML :

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

Tệp JavaScript :

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

Đây là những gì làm việc cho tôi:

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

Vì vậy, tôi đã vật lộn với điều này và nghĩ rằng tôi đang phát điên, điều là bootprap datepicker đang được triển khai không phải jQuery nên các tùy chọn khác nhau;

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