jQuery UI DatePicker - Tarih Biçimini Değiştir

Tek başına seçici olarak jQuery UI UI DatePicker kullanıyorum. Bu kodu var:

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

Ve aşağıdaki JS:

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

Bu kodla değeri döndürmeye çalıştığımda:

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

Bu iade edildi:

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

Hangi tamamen yanlış format. Biçimde döndürülmesinin bir yolu var mı DD-MM-YYYY?

Kodunuz için özel bir özellik:

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

Daha fazla genel bilgi burada:

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

jQuery komut dosyasının içine kodu yapıştırmanız yeterlidir.

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

bu çalışmalı.

getDateDatepicker yöntemi tarih türü değil, bir dize döndürür.

Döndürülen değeri, tarih biçiminizi kullanarak bir dizeye biçimlendirmeniz gerekir. Datepicker formatDateişlevini kullan :

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

Biçim belirteçlerinin tam listesine buradan ulaşabilirsiniz .

Tarih biçimli tarih seçicinin tam kodunu (yy / aa / gg) girin.

Aşağıdaki bağlantıyı kopyalayın ve kafa etiketine yapıştırın:

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

Kodun altına kopyalayın ve gövde etiketi arasına yapıştırın:

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

Eğer gibi iki (2) giriş türü metin istiyorsanız Start Dateve End Datedaha sonra bu komut dosyası ve değişiklik tarihi biçimini kullanın.

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

Gibi iki giriş metni:

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

tarih formatı

Ayrıştırılan ve görüntülenen tarihlerin biçimi. Bu özellik, bölgeselleştirme özelliklerinden biridir. Olası biçimlerin tam listesi için formatDate işlevine bakın.

Kod örnekleri dateFormat seçeneğinin belirtildiği şekilde bir tarih seçici başlatın.

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

İnFor'dan sonra dateFormat seçeneğini edinin veya ayarlayın.

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

getDateişlevi bir JavaScript tarihi döndürür. Bu tarihi biçimlendirmek için aşağıdaki kodu kullanın:

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

Datepicker'da yerleşik olan bir yardımcı program işlevi kullanır:

$.datepicker.formatDate( format, date, settings ) - Tarihi, belirtilen biçimle dize değerine biçimlendirin.

Biçim belirteçlerinin tam listesine buradan ulaşabilirsiniz .

$("#datepicker").datepicker("getDate") bir dize değil bir tarih nesnesi döndürür.

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>

Kullanmaya çalışın

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

ve tarih seçeneği için onu burada bulabilirsiniz birçok seçenek var

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

Datepicker parametresini şu şekilde çağırıyoruz:

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

sadece bu biçimi,

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

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

Yy-aa-gg biçiminde tarihe ihtiyacınız varsa, bunu kullanabilirsiniz: -

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

Desteklenen tüm formatı https://jqueryui.com/datepicker/#date-formats adresinde bulabilirsiniz.

06 Aralık 2015'e ihtiyacım vardı, bunu yaptım:

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

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

Sadece bu HTML sayfasını çalıştırın, çeşitli formatlar görebilirsiniz.

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

Bu da işe yarıyor:

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

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

Bu sorunsuz çalışıyor. Bunu dene.

Bu bağlantıları baş bölümünüze yapıştırı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">

JS kodlaması aşağıdadır.

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

Bir tarih seçici seçerseniz input[type="text"] öğeye tarih ayarlarsanız, özellikle kullanıcı veri girişi için tarih biçimini takip etmediğinde tutarlı biçimde biçimlendirilmiş bir tarih alamayabilirsiniz.

Örneğin, dateFormat öğesini dd-mm-yyve kullanıcı türlerini ayarladığınızda 1-1-1. Datepicker bunu Jan 01, 2001dahili olarak dönüştürür, ancak val()datepicker nesnesini çağırmak "1-1-1"tam olarak metin alanında olan dizeyi döndürür .

Bu, girilen tarihin beklediğiniz biçimde olduğundan emin olmak için kullanıcı girişini doğrulamanız gerektiği veya kullanıcının tarihler serbest biçimli girmesine izin vermeyeceğinizi (bunun yerine takvim seçiciyi tercih ettiğiniz) anlamına gelir. Yine de , tarih seçici kodunu beklediğiniz gibi biçimlendirilmiş bir dize vermeye zorlamak mümkündür:

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"

Ancak, datepicker getDate()yönteminin bir tarih döndürmesine rağmen, yalnızca tarih biçimiyle tam olarak eşleşmeyen kullanıcı girişiyle çok şey yapabileceğini unutmayın. Bu, doğrulama yapılmadığında kullanıcının beklediğinden farklı bir tarih almanın mümkün olduğu anlamına gelir. Uyarı emptor .

Datepicker için jquery kullanıyorum. Bu jqueries bunun için kullanılır

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

Sonra bu kodu takip edersiniz,

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

Benim seçeneğim aşağıda verilmiştir:

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

Sonunda datepicker tarih değiştirme yöntemi için cevap aldım:

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

Bunu kullanıyorum:

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

Hangi " 20120118" gibi bir biçim tarihi döndürür Jan 18, 2012.

Aşağıdaki kod, formun 1'den fazla tarih alanının olup olmadığını kontrol etmenize yardımcı olabilir:

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

Bunu yapmanın doğru yolunun şöyle olacağını düşünüyorum:

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

Bu şekilde, biçim dizesinin yalnızca bir kez tanımlandığından emin olur ve biçim dizesini biçimlendirilmiş tarihe çevirmek için aynı biçimlendiriciyi kullanırsınız.

İşte kutunun dışında bir gelecekteki kanıt tarihi snippet'i. Firefox varsayılan olarak jquery ui datepicker öğesini seçer. Aksi takdirde HTML5 tarih seçici kullanılır. FF HTML5 type = "date" özelliğini destekliyorsa, komut dosyası artık gereksiz olacaktır. Kafa etiketinde üç bağımlılığın gerekli olduğunu unutmayın.

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

Kullanmanız gereken data-date-format="yyyy-mm-dd"sadece basit gibi JQuery içinde giriş alanı html ve ilk veri seçicide

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

Bu şekilde ekleyebilir ve deneyebilirsiniz:

HTML dosyası:

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

JavaScript dosyası:

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

Benim için işe yarayan buydu:

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

Bu yüzden bununla mücadele ettim ve delirdiğimi düşündüm, şey bootstrap datepicker jQuery değil bu yüzden tehditler farklı uygulanmıştı;

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