programing

jQuery Datepicker 텍스트 상자에 오늘 날짜를 미리 입력하려면 어떻게 해야 합니까?

firstcheck 2023. 1. 1. 11:28
반응형

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-06-04)에서 작동할 수 있습니다.

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

이것만으로는 동작하지 않습니다.

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

메모: 여기에서는 허용 가능한 setDate 파라미터에 대해 설명합니다.

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

효과가 있는 것 같았지만, 더 나은 방법이 있을지도 몰라요.

메소드는 날짜를 설정하고 관련 컨트롤을 업데이트합니다.방법은 다음과 같습니다.

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

데모

설명서에서 설명한 바와 같이setDate()JavaScript Date 객체, 숫자 또는 문자열을 기쁘게 받아들입니다.

새 날짜는 날짜 개체 또는 현재 날짜 형식의 문자열(예: '01/26/2009'), 오늘부터 일수(예: +7) 또는 값 및 기간의 문자열(예: 년은 'y', 월은 'm', 주간은 'w', 일수는 'd', 날짜는 '+1m +7d'), null로 선택할 수 있습니다.

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

오늘로 설정:

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

어제로 설정:

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

그리고 오늘 날짜 이전이나 이후에도 마찬가지입니다.

jQuery UI 、 Methods 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);
});

고마워, 그레이고스트!

이건 나한테 효과가 있었어.

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

이 코드를 사용하면 날짜 선택자의 형식을 사용할 수 있습니다.

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

포맷을 다시 적용할 필요가 없습니다.날짜 피커 초기화 시 미리 정의된1 을 사용합니다(할당되어 있는 경우).

데이비드 K 에그헤드의 코드가 완벽하게 작동했어, 고마워!

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

로드 시 날짜 선택기를 특정 기본 시간(이 경우 현재 날짜)으로 설정하고 다른 날짜를 선택할 수 있는 옵션이 있습니다.구문은 다음과 같습니다.

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

두 가지 옵션이 있습니다.

OPTION A) 캘린더에서 [Active](액티브)로 표시됩니다(입력 내용을 클릭했을 때만).

Js:

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

참조:

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

OPTION B) 기본 입력은 오늘입니다.먼저 날짜 선택기를 채워야 합니다.

$("input.datepicker").datepicker().datepicker("setDate", 새로운 Date();

내 의견을 좀 더 덧붙여야겠어.선택기는 추가/업데이트 양식에서 사용 중이므로 기존 레코드를 편집하는 경우 데이터베이스에서 가져온 날짜를 표시하거나, 그렇지 않은 경우 오늘 날짜를 표시해야 합니다.아래는 문제 없습니다.

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

날짜를 미리 입력하려면 먼저 날짜 선택기를 초기화하고 setDate 파라미터 값을 전달해야 합니다.

$("#date_pretty").datepicker().datepicker("setDate", new Date());
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());파라미터가 설정된 날짜 선택기가 있으면 문제가 됩니다.

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

사용방법:

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

예를 들어, 날짜 가져오기: 사용자가 더 쉽게 이해할 수 있는 2019년 10월 10일.

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

반응형