programing

jQuery UI 날짜 선택기 - 날짜 형식 변경

yellowcard 2023. 5. 10. 20:47
반응형

jQuery UI 날짜 선택기 - 날짜 형식 변경

저는 jQuery UI의 UI DatePicker를 독립 실행형 선택기로 사용하고 있습니다.다음 코드가 있습니다.

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

그리고 다음과 같은 JS:

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

이 코드로 값을 반환하려고 할 때:

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

다음과 같이 반환됩니다.

2009년 8월 25일 화요일 00:00:00 GMT+0100 (BST)

그것은 완전히 잘못된 형식입니다.포맷으로 반품할 수 있는 방법이 있습니까?DD-MM-YYYY?

다음은 코드에 대한 특정 정보입니다.

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

자세한 내용은 여기에서 확인할 수 있습니다.

jQuery 스크립트 코드 안에 코드를 붙여넣습니다. 

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

이것은 효과가 있을 것입니다.

datepicker 메서드는 문자열이 아닌 날짜 형식을 반환합니다.

반환된 값의 형식을 날짜 형식을 사용하여 문자열로 지정해야 합니다. picker 날짜기사용을 사용합니다.formatDate함수:

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

형식 지정자의 전체 목록은 여기에서 사용할 수 있습니다.

날짜 형식(yyy/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"/>

개의 ((예: 과음같두가입지유력원텍경할우스를트다)를 원한다면,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' });

그리고 이용 가능한 많은 옵션이 있습니다. 날짜 선택기는 여기에서 찾을 수 있습니다.

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

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

yy-mm-dd 형식의 날짜가 필요한 경우 다음을 사용할 수 있습니다.

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

지원되는 모든 형식은 https://jqueryui.com/datepicker/ #date-message에서 찾을 수 있습니다.

저는 2015년 12월 6일이 필요했습니다. 저는 이렇게 했습니다.

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

당신은 단순히 당신의 기능에 이 형식을 사용할 수 있습니다.

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

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

그래서 저는 이것과 씨름했고 제가 미쳐가고 있다고 생각했습니다. 문제는 부트스트랩 날짜 선택기가 jQuery가 아니라 구현되고 있었기 때문에 옵션이 다르다는 것입니다.

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

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

다음 방법을 추가하고 시도할 수 있습니다.

HTML 파일:

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

JavaScript 파일:

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

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

저는 데이트 선택을 위해 jquery를 사용하고 있습니다.이 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>

이것은 원활하게 작동합니다.이거 먹어봐요.

헤드 섹션에 이 링크를 붙여넣습니다.

<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날짜 선택자가 이를 다음으로 변환합니다.Jan 01, 2001내부적으로는 그렇지만 소명이 있는val()선택기 개체가 문자열을 반환하는 날짜에"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"

하지만 데이트 상대가 선택하는 동안에는getDate()메소드는 날짜를 반환합니다. 날짜 형식과 정확히 일치하지 않는 사용자 입력으로만 가능합니다.이는 유효성 검사가 없으면 사용자가 예상하는 날짜와 다른 날짜를 다시 받을 수 있음을 의미합니다.경고 빈터.

옵션은 다음과 같습니다.

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

드디어 날짜 선택기 날짜 변경 방법에 대한 답변을 받았습니다.

$('#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는 기본적으로 jqueryui 날짜 선택기로 설정됩니다.그렇지 않으면 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 및의기다초터기택는선단순합니이데드에▁simple▁like▁in▁picker와 같이 사용됩니다.

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

이것이 저에게 도움이 되었습니다.

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

"dd-mm-yy" 형식을 사용하려면 날짜 선택기에서 날짜 형식을 변경해야 합니다. 이 작업이 가능합니다.

$("#date").
({
 dateFormar:'dd-mm-yy',
}).val();

언급URL : https://stackoverflow.com/questions/1328025/jquery-ui-datepicker-change-date-format

반응형

'programing' 카테고리의 다른 글

jQuery 선택기의 와일드카드  (0) 2023.05.10
이상한 AQDefaultDevice 로깅  (0) 2023.05.10
로그캣이 안드로이드에서 아무것도 표시되지 않는 이유는 무엇입니까?  (0) 2023.05.10
"던지기"와 "던지기" 사이에 차이점이 있습니까?  (0) 2023.05.10
전체 경로 없이 현재 디렉토리 또는 폴더 이름 가져오기  (0) 2023.05.10

'programing'의 다른글

  • 현재글jQuery UI 날짜 선택기 - 날짜 형식 변경

관련글

댓글

티스토리툴바