jQuery UI DatePicker - เปลี่ยนรูปแบบวันที่

ฉันใช้ UI 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หรือไม่?

นี่คือรหัสเฉพาะของคุณ:

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ฟังก์ชั่นdatepicker ของ:

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

รายการเต็มรูปแบบของ specifiers รูปแบบสามารถใช้ได้ที่นี่

โค้ดที่สมบูรณ์สำหรับตัวใช้เลือกวันที่พร้อมรูปแบบวันที่ (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>

คัดลอกโค้ดด้านล่างและวางระหว่างแท็กเนื้อหา:

      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

ตัวอย่างรหัสเตรียมใช้งาน 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' );

getDateฟังก์ชั่นส่งกลับวันที่จาวาสคริปต์ ใช้รหัสต่อไปนี้เพื่อจัดรูปแบบวันที่นี้:

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

มันใช้ฟังก์ชั่นยูทิลิตี้ซึ่งสร้างไว้ใน datepicker:

$.datepicker.formatDate( format, date, settings ) - จัดรูปแบบวันที่ให้เป็นค่าสตริงด้วยรูปแบบที่ระบุ

รายการเต็มรูปแบบของ specifiers รูปแบบสามารถใช้ได้ที่นี่

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

และมีตัวเลือกมากมายสำหรับ 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>

หากคุณต้องการวันที่ในรูปแบบ 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>

หากคุณตั้งค่า datepicker ในinput[type="text"]องค์ประกอบคุณอาจไม่ได้รับการจัดรูปแบบวันที่อย่างสม่ำเสมอโดยเฉพาะอย่างยิ่งเมื่อผู้ใช้ไม่ปฏิบัติตามรูปแบบวันที่สำหรับการป้อนข้อมูล

ตัวอย่างเช่นเมื่อคุณตั้ง DATEFORMAT เป็นและประเภทผู้ใช้dd-mm-yy 1-1-1Datepicker จะแปลงสิ่งนี้เป็น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"

อย่างไรก็ตามโปรดทราบว่าในขณะที่getDate()วิธีการของ datepicker นั้นจะส่งกลับวันที่ แต่ก็สามารถทำได้มากกับการป้อนข้อมูลของผู้ใช้ที่ไม่ตรงกับรูปแบบวันที่ ซึ่งหมายความว่าในกรณีที่ไม่มีการตรวจสอบความเป็นไปได้ที่จะได้รับวันที่กลับที่แตกต่างจากสิ่งที่ผู้ใช้คาดหวัง caveat emptor

ฉันใช้ 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>

ตัวเลือกของฉันได้รับด้านล่าง:

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

ในที่สุดก็ได้รับคำตอบสำหรับวิธีการเปลี่ยนวันที่ datepicker:

$('#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 มิฉะนั้นจะใช้ datepicker HTML5 หาก FF รองรับ HTML5 type = "date" สคริปต์จะถูกทำซ้ำซ้อน อย่าลืมว่าต้องมีการขึ้นต่อกันสามอย่างในแท็กส่วนหัว

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

ดังนั้นฉันจึงต่อสู้กับสิ่งนี้และคิดว่าฉันเป็นบ้าสิ่งที่เป็น bootstrap datepicker ถูกนำมาใช้ไม่ jQuery ดังนั้นตัวเลือกที่แตกต่างกัน;

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