오늘 날짜로 jQuery Datepicker 텍스트 상자를 미리 채우려면 어떻게합니까?


237

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

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

그리고 물론 HTML에서 ...

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

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


7
가장 많이 사용되는 답변이 승인 된 답변보다 낫습니다. 허용 된 답변을 변경하는 것이 좋습니다.
ahmadali shafiee 20시 48 분


1
@ahmadalishafiee (및 다른 사람). 현재 승인 된 솔루션은 2015-05-07에 승인되었습니다.
Teepeemm

답변:


569

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

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

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

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

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

3
이 솔루션은 우아합니다
숨겨

2
이것은 실제로 나를 위해 일한 것이지 받아 들여진 해결책이 아닙니다. 감사합니다
Mehdiway

7
작동하지 않습니다. 먼저 $ ( ". date-pick"). datepicker (); 그리고 $ ( ". date-pick"). datepicker ( 'setDate', new Date ());
Misha Akopov 2016 년

9
최근 브라우저 업데이트 후 Chrome에서 더 이상 작동하지 않음
Max Flex

3
공장. 나는 $(".date-pick").datepicker().datepicker('setDate', new Date()); tho를 설정합니다
seebiscuit

221

먼저 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 매개 변수는 여기 에 설명되어 있습니다


3
jQueryUI 1.8을 사용 하여이 솔루션이 이것을 달성하는 유일한 (정상적인) 방법임을 알았습니다.
brianz

13
$ ( ". selector"). datepicker (). datepicker ( "setDate", 새 날짜 ()); 작동하고 jQuery가 DOM을 두 번 검색하지 않습니다.
abc123

1
훌륭한 대답은 $ ( ". date-pick"). datepicker ( "setDate", new Date ()); 그리고 먼저 호출하지 않으면 작동하지 않습니다 $ ( ". date-pick"). datepicker (); 귀하의 답변이 훨씬 낫습니다
Misha Akopov 2016 년

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

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


이것은 두 가지를 제외하고는 잘 작동합니다. 1) jQuery 메서드를 사용하여 현재 날짜를 가져 오기를 원했지만 중요하지 않을 수도 있습니다. 2)이 솔루션은 오늘 날짜보다 정확히 한 달 전에 값을 생성합니다!
Marcus

2
오-네 말이 맞아! 그것을 체크 아웃 - w3schools.com/jsref/jsref_obj_date.asp - 달 0-11 - 당신은 하나를 추가해야합니다 .. 호기심, GETDATE는 1-31이지만 속하는 getMonth에 .. 0-11이다
루카스

3
더 쉬운 방법이 있습니다 .. 아래 내 게시물을 참조하십시오.
Ravi Ram

이 솔루션을 사용하면 텍스트를 직접 표시하고 날짜를 동시에 설정할 수 있지만 CiscoIPPhone 솔루션에는 선택기를 열지 않고 값을 표시하기위한 다른 단계가 필요합니다.
Afshar Mohebbi 2019

4
setDate를 들어 다음 날을 입력하기 위해 datepicker의 일반적인 상대 표기법을 사용할 수도 있습니다 .datepicker('setDate', '+1d').
kosii 2016 년

59

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생성자에서 속성을 설정해도 관련 컨트롤이 업데이트 되지 않습니다 .


1
데모에서 왜 작동합니까? 이 코드를 내 사이트에 복사하면 pg 가로 드 될 때 대화 상자가 계속 나타납니다.
chobo2

1
이것은 나를 위해 일했습니다-위의 대답과 다른 옵션은 그렇지 않았습니다.
lydiat

이것은 위의 것보다 훨씬 더 나은 솔루션입니다.
adamj

날짜 선택기와 일치하도록 날짜 형식이 "mm-dd-yy"여야했지만 현재이 질문에 대한 최선의 대답입니다.
John81

26

오늘로 설정 :

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

어제로 설정 :

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

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

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


1
다른 사람들이 언급했듯이, 당신은 이미 datepicker ()를 호출 했어야합니다.$(".date-pick").datepicker("setDate", '+0');
jwbensley

내 dateFormat이 MySQL의 날짜 형식 (yy-mm-dd)과 일치해야하기 때문에 원하는대로 작동했습니다. 이 setDate는 월과 일에 제로 패딩을 추가합니다.
jjohn

9

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

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

고마워요 고스트!


7

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

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

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


7

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

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

5

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

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

나는 또한 그것을 조금 다듬었고 그것은 또한 효과가 있었다 :

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

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

2

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

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

이 솔루션은 크롬에서 저에게
효과적이었습니다.

2

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

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

1

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

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

1

두 가지 옵션이 있습니다.

옵션 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", 새 날짜 ());

1
옵션 A는 날짜 선택기가 현재 날짜로 기본 설정되는 날짜를 선택할 때까지 비워 둘 수 있기 때문에 유효합니다
waxingsatirical

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

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


0

이 시도

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

0

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

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

0

이것을 사용하십시오 :

$(".datepicker").datepicker({ dateFormat: 'dd-M-yy' }).datepicker('setDate', new Date());

예를 들어 2019 년 10 월 10 일 형식의 날짜를 얻으려면 사용자가 더 이해하기 쉽습니다.


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

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


브라우저가 asString () 함수를 인식하지 못했습니다. 나는 이것을 이렇게했다 : $ ( ". date-pick"). datepicker ( 'setDate', new Date ());
CiscoIPPhone

1
asString ()은 toString ()이어야한다고 생각합니다.
rg88

1
Kevin Luck의 DatePicker와 Jquery UI DatePicker는 서로 다른 날짜 선택기입니다.
Craig Hooghiem

@gamerzfuse jQuery UI의 날짜 선택기는 Kevin Luck의 날짜 선택기를 기반으로합니다.
Mathias Bynens
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.