jQuery UI DatePicker - Ubah Format Tanggal

Saya menggunakan DatePicker UI dari jQuery UI sebagai pemilih yang berdiri sendiri. Saya punya kode ini:

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

Dan JS berikut:

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

Ketika saya mencoba mengembalikan nilainya dengan kode ini:

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

Saya dikembalikan ini:

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

Yang benar-benar format yang salah. Apakah ada cara saya bisa mengembalikannya dalam format DD-MM-YYYY?

Berikut ini satu kode khusus untuk Anda:

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

Info umum lainnya tersedia di sini:

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

di dalam kode skrip jQuery cukup rekatkan kode tersebut.

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

ini seharusnya bekerja.

The getDatemetode datepicker mengembalikan jenis tanggal, bukan string.

Anda perlu memformat nilai yang dikembalikan ke string menggunakan format tanggal Anda. Gunakan formatDatefungsi datepicker :

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

Daftar lengkap penentu format tersedia di sini .

Berikut kode lengkap untuk pemilih tanggal dengan format tanggal (yy / mm / dd).

Salin tautan di bawah dan rekatkan di tag kepala:

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

Salin kode di bawah ini dan tempel di antara tag tubuh:

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

Jika Anda ingin dua (2) jenis teks input suka Start Datedan End Datekemudian gunakan skrip ini dan ubah format tanggal.

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

Dua input teks seperti:

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

format tanggal

Format untuk tanggal yang diuraikan dan ditampilkan. Atribut ini adalah salah satu atribut regionalisasi. Untuk daftar lengkap dari format yang mungkin lihat fungsi formatDate.

Contoh kode Inisialisasi datepicker dengan opsi dateFormat yang ditentukan.

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

Dapatkan atau atur opsi dateFormat, setelah init.

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

getDatefungsi mengembalikan tanggal JavaScript. Gunakan kode berikut untuk memformat tanggal ini:

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

Ini menggunakan fungsi utilitas yang dibangun ke dalam datepicker:

$.datepicker.formatDate( format, date, settings ) - Memformat tanggal menjadi nilai string dengan format yang ditentukan.

Daftar lengkap penentu format tersedia di sini .

$("#datepicker").datepicker("getDate") mengembalikan objek tanggal, bukan string.

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>

Coba gunakan

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

dan ada banyak opsi yang tersedia Untuk datepicker Anda dapat menemukannya Di Sini

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

Ini adalah cara kami memanggil datepicker dengan parameter

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

Anda cukup menggunakan format ini di fungsi Anda seperti

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

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

Jika Anda memerlukan tanggal dalam format yy-mm-dd, Anda dapat menggunakan ini: -

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

Anda dapat menemukan semua format yang didukung https://jqueryui.com/datepicker/#date-formats

Saya membutuhkan 06, Des 2015, saya melakukan ini: -

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

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

Cukup jalankan halaman HTML ini, Anda dapat melihat beberapa format.

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

Ini juga berfungsi:

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

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

Ini bekerja dengan lancar. Coba ini.

Rekatkan tautan ini di bagian kepala Anda.

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

Berikut ini adalah pengkodean 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>

Jika Anda menyiapkan datepicker pada suatu input[type="text"]elemen, Anda mungkin tidak mendapatkan tanggal yang diformat secara konsisten, terutama ketika pengguna tidak mengikuti format tanggal untuk entri data.

Misalnya, ketika Anda mengatur dateFormat sebagai dd-mm-yydan tipe pengguna 1-1-1. Datepicker akan mengonversikan ini menjadi Jan 01, 2001internal tetapi memanggil val()objek datepicker akan mengembalikan string "1-1-1"- persis apa yang ada di bidang teks.

Ini berarti Anda harus memvalidasi input pengguna untuk memastikan tanggal yang dimasukkan dalam format yang Anda harapkan atau tidak memungkinkan pengguna untuk memasukkan tanggal bentuk bebas (bukan memilih pemilih kalender). Meski begitu itu adalah mungkin untuk memaksa kode datepicker untuk memberikan string diformat seperti yang Anda harapkan:

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"

Perlu diketahui bahwa meskipun metode datepicker getDate()akan mengembalikan tanggal, itu hanya dapat melakukan banyak hal dengan input pengguna yang tidak sama persis dengan format tanggal. Ini berarti jika tidak ada validasi, dimungkinkan untuk mendapatkan tanggal kembali yang berbeda dari yang diharapkan pengguna. Kaisar peringatan .

Saya menggunakan jquery untuk datepicker. Jquery ini digunakan untuk itu

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

Kemudian Anda ikuti kode ini,

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

Opsi saya diberikan di bawah ini:

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

Akhirnya mendapat jawaban untuk metode perubahan tanggal datepicker:

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

Saya menggunakan ini:

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

Yang mengembalikan tanggal format seperti " 20120118" untuk Jan 18, 2012.

Kode di bawah ini dapat membantu memeriksa apakah formulir memiliki lebih dari 1 bidang tanggal:

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

Saya pikir cara yang benar untuk melakukan ini adalah seperti ini:

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

Dengan cara ini Anda memastikan string format hanya didefinisikan sekali dan Anda menggunakan formatter yang sama untuk menerjemahkan string format ke tanggal yang diformat.

Berikut ini cuplikan di luar kotak tanggal bukti masa depan. Firefox default ke jquery ui datepicker. Jika tidak, datepicker HTML5 digunakan. Jika FF pernah mendukung HTML5 type = "date" skrip akan menjadi berlebihan. Jangan lupa tiga dependensi diperlukan di tag kepala.

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

Anda harus menggunakan data-date-format="yyyy-mm-dd"html bidang input dan pemilih data awal di JQuery sama seperti sederhana

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

Anda dapat menambah dan mencoba cara ini:

File HTML :

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

File JavaScript :

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

Inilah yang bekerja untuk saya:

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

Jadi saya berjuang dengan ini dan berpikir saya menjadi gila, masalahnya bootepap datepicker sedang diimplementasikan bukan jQuery sehingga opsi berbeda;

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