jQuery datepicker는 즉석에서 선택한 날짜를 설정합니다.


121

jquery Date picker의 선택한 날짜를 동적으로 어떻게 변경할 수 있습니까? 인라인 날짜 선택기를 만들었습니다. 그런 다음 잠시 후 처음부터 datepicker를 다시 만들지 않고 다른 날짜를 반영하고 싶습니다.

나는 setDate 메소드를 시도했지만 작동하지 않았으며 doc에 많은 문서가 없습니다 .

또 다른이 플러그인 (? 확장)되어 여기에 ,하지만 난 jquery.ui.all.js와 함께 제공되는 플러그인을 사용하고 싶습니다.

답변:


187

어떤 버전의 jQuery-UI를 사용하고 있습니까? 1.6r6, 1.7 및 1.7.1에서 다음을 테스트했으며 작동합니다.

//Set DatePicker to October 3, 2008
$('#dateselector').datepicker("setDate", new Date(2008,9,03) );

16
setDate가 작동하지 않으면 setDate 대신 defaultDate를 사용하십시오.
bingjie2680

8
하지만 나를 위해 그것은 어느 쪽이든 작동하지 않았습니다. 날짜가 변경되었지만 선택한 날짜가 캘린더에 나타나지 않습니다. 오늘만 강조 표시됩니다.
Prageeth godage

28

minDate 또는 maxDate 옵션이 설정된 경우 설정하려는 날짜가 허용 된 날짜 범위 내에 있는지 확인하십시오.


10

이 예는 드롭 다운 캘린더의 기본값과 텍스트 상자의 값을 사용하는 방법을 보여줍니다. 또한 기본값을 이전 날짜로 설정하는 방법도 보여줍니다.

selectedDate는 달력 컨트롤의 현재 선택된 날짜를 보유하는 또 다른 변수입니다.

    var date = new Date();
    date.setDate(date.getDate() - 1);

    $("#datepicker").datepicker({
        dateFormat: "yy-mm-dd",
        defaultDate: date,
        onSelect: function () {
            selectedDate = $.datepicker.formatDate("yy-mm-dd", $(this).datepicker('getDate'));
        }
    });

    $("#datepicker").datepicker("setDate", date);

8

Keith Wood의 DatePicker ( http://keith-wood.name/datepickRef.html )의 경우 다음과 같은 작업이 수행됩니다. 기본 날짜 설정은 마지막입니다.

    $('#datepicker').datepick({
        minDate: 0,
        maxDate: '+145D',
        multiSelect: 7,
        renderer: $.datepick.themeRollerRenderer,
        ***defaultDate: new Date('1 January 2008')***
    });

7

어떤 이유로 어떤 경우에는 setDate가 작동하지 않게 만들 수 있습니다.

내가 찾은 해결 방법은 주어진 입력의 값 속성을 단순히 업데이트하는 것입니다. 물론 datepicker 자체는 업데이트되지 않지만 방금 찾는 것이 날짜를 표시하는 것이라면 제대로 작동합니다.

var date = new Date(2008,9,3);
$("#your-input").val(date.getMonth()+"/"+date.getDate()+"/"+date.getFullYear());
// Will display 9/3/2008 in your #your-input input

6
달 하나 오프가있다, (date.getMonth () + 1) 당신이 필요 그래서
아담

1
초기 옵션에서 설정, 나는 .datepicker와 이후 체인을했다면하여 setDate는 ( '하여 setDate을', ...) 일을하지 않습니다
martinedwards

4
$('.date-pick').datePicker().val(new Date()).trigger('change')

마지막으로, 지난 몇 시간 동안 내가 찾은 것! 텍스트 필드의 설정 날짜뿐만 아니라 변경을 시작해야합니다!


2
그것은해야 .datepicker()하지.datePicker()
아르 슬란 타 바섬

3

이것은 오래된 스레드이지만 내가 사용한 방법에 대한 정보를 제공하고 싶습니다. 오늘 날짜를 설정하려면 아래와 같이 간단히 적용하면됩니다.

 $("#datepickerid").datepicker("setDate", "0");

현재 날짜 전후로 며칠을 설정하려면 -/+아래와 같이 원하는 날짜의 기호 기호 를 사용하십시오 .

 $("#datepickerid").datepicker("setDate", "-7");
 $("#datepickerid").datepicker("setDate", "+5");

2

setDate는 jquery UI에서 사용되는 인라인 날짜 선택기에서만 문제가되는 것 같습니다. 특정 오류는 InternalError : too much recursion입니다.


2

이것은 나를 위해 작동합니다.

$("#dateselector").datepicker("option", "defaultDate", new Date(2008,9,3));

2

Html에서는 다음과 같은 날짜 선택기로 입력 필드를 추가 할 수 있습니다.

<input class="form-control date-picker fromDates" id="myDate" type="text">

그런 다음 자바 스크립트에서 datepicker를 초기화하고 값을 다음과 같이 설정하십시오.

$('.fromDates').datepicker({
                maxDate: '0',
                dateFormat: "dd/mm/yy",
                changeYear: true,
                changeMonth: true,
                yearRange: "-100:+0"
            });

var myDateVal = moment('${value}').format('DD/MM/YYYY');
$('#myDate').datepicker().datepicker('setDate', myDateVal );

(여기에서 fromdate 속성은 현재 날짜의 이전 날짜를 보여줍니다)


0
var dt = new Date();
var renewal = moment(dt).add(1,'year').format('YYYY-MM-DD');
// moment().add(number, period)
// moment().subtract(number, period)
// period : year, days, hours, months, week...

코드 전용 답변은 문제 해결 방법을 설명하지 않기 때문에 Stack Overflow에서 권장되지 않습니다. 코드의 기능과 질문에 대한 답변을 설명하는 답변을 편집하여 OP뿐만 아니라 다른 사용자에게도 유용합니다.
FluffyKitten

-1

setDate 메서드에도 많은 문제가있었습니다. v1에서만 작동하는 것 같습니다. 그러나 작동하는 것처럼 보이는 것은 dpSetSelected 메서드를 사용하는 것입니다.

    $("#dateselector").dpSetSelected(new Date(2010, 0, 26).asString());

행운을 빕니다!


-1

또는 당신은 단순히 가질 수 있습니다

$('.date-pick').datePicker().val(new Date()).trigger('change')

1
.datepicker()아니 어야합니다 .datePicker().
Florin Frătică
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.