jQuery UI DatePicker-날짜 형식 변경

jQuery UI의 UI DatePicker를 독립형 선택기로 사용하고 있습니다. 이 코드가 있습니다 :

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

이 작동합니다.

getDatedatepicker 의 메소드는 문자열이 아닌 날짜 유형을 리턴합니다.

날짜 형식을 사용하여 반환 된 값을 문자열로 형식화해야합니다. 날짜 선택기 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 옵션을 가져 오거나 설정하십시오.

//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에 내장 된 유틸리티 함수를 사용합니다.

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

datepicker의 경우 여기에서 찾을 수있는 옵션이 많이 있습니다.

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

나는 2015 년 12 월 6 일이 필요했습니다.

$("#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. datepicker는 이것을 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"

그러나 datepicker의 getDate()메서드는 날짜를 반환 하지만 날짜 형식과 정확히 일치하지 않는 사용자 입력으로 만 수행 할 수 있습니다. 즉, 유효성 검사가 없으면 사용자가 기대하는 것과 다른 날짜를 다시 얻을 수 있습니다. 주의 사항 emptor .

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>

마지막으로 datepicker 날짜 변경 방법에 대한 답변을 얻었습니다.

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

나는 이것을 사용한다 :

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

에 20120118대해 " " 와 같은 형식의 날짜를 반환합니다 Jan 18, 2012.

아래 코드는 양식에 둘 이상의 날짜 필드가 있는지 확인하는 데 도움이 될 수 있습니다.

<!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"JQuery의 입력 필드 html 및 초기 데이터 선택기에서 간단하게 사용해야 합니다.

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

이 방법으로 추가하고 시도 할 수 있습니다.

HTML 파일 :

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

자바 스크립트 파일 :

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

이것이 나를 위해 일한 것입니다.

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

그래서 나는 이것으로 어려움을 겪고 화가 났다고 생각했다. 부트 스트랩 datepicker는 jQuery가 아니라 구현되었으므로 옵션이 다르다.

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