Programing

오늘 날짜로 jQuery Datepicker 텍스트 상자를 미리 채우는 방법은 무엇입니까?

lottogame 2020. 4. 14. 08:25
반응형

오늘 날짜로 jQuery Datepicker 텍스트 상자를 미리 채우는 방법은 무엇입니까?


매우 간단한 jQuery Datepicker 달력이 있습니다.

$(document).ready(function(){
    $("#date_pretty").datepicker({ 
    });
});

그리고 물론 HTML에서 ...

<input type="text" size="10" value="" id="date_pretty"/>

오늘 날짜는 달력을 표시 할 때 사용자에게 잘 강조 표시되어 있지만 jQuery가 사용자가 아무것도하지 않고 페이지로드시 오늘 날짜로 텍스트 상자 자체를 미리 채우는 방법은 무엇입니까? 시간의 99 % 인 오늘 날짜 기본값은 원하는 것입니다.


업데이트 : Chrome에서 더 이상 작동하지 않는 보고서가 있습니다.

이것은 간결하며 작업을 수행합니다 (폐기 됨).

$(".date-pick").datepicker('setDate', new Date());

이것은 사용, 덜 간결이다 체인은 크롬에서 작업 (2019년 6월 4일)에 있습니다 :

$(".date-pick").datepicker().datepicker('setDate', new Date());

먼저 datepicker ()를 호출 한 다음 'setDate'를 사용하여 현재 날짜를 가져와야합니다.

$(".date-pick").datepicker();
$(".date-pick").datepicker("setDate", new Date());

또는이 답변에 대한 의견에 명시된 바와 같이 날짜 선택기 초기화 후 setDate 메소드 호출을 연결하십시오.

$('.date-pick').datepicker({ /* optional option parameters... */ })
               .datepicker("setDate", new Date());

그것은 것입니다 NOT 단지와 함께 작동

$(".date-pick").datepicker("setDate", new Date());

참고 : 허용되는 setDate 매개 변수는 여기 에 설명되어 있습니다


var myDate = new Date();
var prettyDate =(myDate.getMonth()+1) + '/' + myDate.getDate() + '/' +
        myDate.getFullYear();
$("#date_pretty").val(prettyDate);

작동하는 것처럼 보이지만 더 나은 방법이있을 수 있습니다 ..


setDate()방법은 날짜를 설정하고 관련 컨트롤을 업데이트합니다. 방법은 다음과 같습니다.

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

데모

설명서에서 언급했듯이 setDate()JavaScript Date 객체, 숫자 또는 문자열을 행복하게 받아들입니다.

새 날짜는 Date 객체이거나 현재 날짜 형식의 문자열 (예 : '01 / 26 / 2009 '), 오늘 이후의 일 수 (예 : +7) 또는 값과 기간 문자열 ('y ' 년, 'm'개월, 'w'주, 'd'(예 : '+ 1m + 7d') 또는 선택한 날짜를 지우려면 null입니다.

궁금한 경우 defaultDate생성자에서 속성을 설정해도 관련 컨트롤이 업데이트 되지 않습니다 .


오늘로 설정 :

$('#date_pretty').datepicker('setDate', '+0');

어제로 설정 :

$('#date_pretty').datepicker('setDate', '-1');

그리고 일의 수와에 이전 또는 이후에 오늘 날짜 .

jQuery UI›메소드›setDate를 참조하십시오 .


해결책은 다음과 같습니다.

$(document).ready(function(){
    $("#date_pretty").datepicker({ 
    });
    var myDate = new Date();
    var month = myDate.getMonth() + 1;
    var prettyDate = month + '/' + myDate.getDate() + '/' + myDate.getFullYear();
    $("#date_pretty").val(prettyDate);
});

고마워요 고스트!


이 코드는 날짜 선택기 형식을 사용하도록 보장합니다.

$('#date-selector').datepicker('setDate', new Date());

형식을 다시 적용 할 필요가 없습니다. 날짜 선택기 초기화시 미리 지정한 날짜 선택기를 사용합니다 (지정 한 경우!);)


이것은 나를 위해 일했습니다.

$('#inputName')
  .datepicker()
  .datepicker('setDate', new Date());

David K ​​Egghead의 코드는 완벽하게 작동했습니다. 감사합니다!

$(".date-pick").datepicker(); 
$(".date-pick").datepicker("setDate", new Date()); 

나는 또한 그것을 조금 손질하고 작동했습니다.

$(".date-pick").datepicker().datepicker("setDate", new Date()); 

$('input[name*="date"]').datepicker({
        dateFormat: 'dd-mm-yy',
        changeMonth: true,
        changeYear: true,
        beforeShow: function(input, instance) { 
            $(input).datepicker('setDate', new Date());
        }
    });

로드시 datepicker를 특정 기본 시간 (제 경우에는 현재 날짜)으로 설정하고 구문을 다른 날짜로 선택할 수있는 옵션이 있습니다 :

    $(function() { 
        // initialize the datapicker
        $("#date").datepicker();

        // set the time
        var currentDate = new Date();
        $("#date").datepicker("setDate",currentDate);

    //  set the options for the button  
        $("#date").datepicker("option",{
            dateFormat: 'dd/mm',
            showOn: "button",
          // whatever option Or event you want 
        });
  });

날짜를 미리 채우려면 먼저 날짜 선택기를 초기화 한 다음 setDate 매개 변수 값을 전달해야합니다.

$("#date_pretty").datepicker().datepicker("setDate", new Date());

방금 2 센트를 더할 줄 알았는데 선택기는 추가 / 업데이트 양식에서 사용되므로 기존 레코드를 편집 할 경우 데이터베이스에서 오는 날짜를 표시하거나 그렇지 않은 경우 오늘 날짜를 표시해야합니다. 아래는 나를 위해 잘 작동합니다.

    $( "#datepicker" ).datepicker();
    <?php if (!empty($oneEVENT['start_ts'])): ?>
       $( "#datepicker" ).datepicker( "setDate", "<?php echo $startDATE; ?>" );
    <? else: ?>
       $("#datepicker").datepicker('setDate', new Date());   
    <?php endif; ?>
  });

두 가지 옵션이 있습니다.

옵션 A) 입력을 클릭 할 때만 달력에서 "활성"으로 표시됩니다.

JS :

$('input.datepicker').datepicker(
                        {   
                            changeMonth: false,
                            changeYear: false,
                            beforeShow: function(input, instance) { 
                                $(input).datepicker('setDate', new Date());
                            }
                        }                         
                     );

CSS :

div.ui-datepicker table.ui-datepicker-calendar .ui-state-active,
        div.ui-datepicker table.ui-datepicker-calendar .ui-widget-content .ui-state-active  {
            background: #1ABC9C;
            border-radius: 50%;
            color: #fff;
            cursor: pointer;
            display: inline-block;
            width: 24px; height: 24px;
        }​

옵션 B) 오늘 기본적으로 입력하십시오. 먼저 datepicker를 채워야합니다.

$ ( "input.datepicker"). datepicker (). datepicker ( "setDate", 새 날짜 ());

var prettyDate = $.datepicker.formatDate('dd-M-yy', new Date());
alert(prettyDate);

prettyDate를 필요한 제어에 지정하십시오.


이 시도

$(this).datepicker("destroy").datepicker({
            changeMonth: false, changeYear: false,defaultDate:new Date(), dateFormat: "dd-mm-yy",  showOn: "focus", yearRange: "-5:+10"
        }).focus();

.datepicker('setDate', new Date());datepicker가 이미 매개 변수로 구성되어 있으면 엉망이되어 전화하는 데 문제 가있는 경우가 있습니다.

$("#myDateText").val(moment(new Date()).format('DD/MM/YYYY'));

$(function()
{
$('.date-pick').datePicker().val(new Date().asString()).trigger('change');
});

출처 : http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePickerDefaultToday.html

참고 URL : https://stackoverflow.com/questions/233553/how-do-i-pre-populate-a-jquery-datepicker-textbox-with-todays-date

반응형