드롭 다운 선택 옵션 변경 datepicker select에 따라 달라짐

안녕하세요 여러분, 하루를 선택하는 옵션이있는 검색을 만들려고합니다.드롭 다운 선택 옵션 변경 datepicker select에 따라 달라짐

드롭 다운 선택 및 캘린더와 함께 해당 옵션을 제공하고 싶습니다.

부트 스트랩과 JQuery-UI datepicker를 사용하고 있습니다. 내 코드가 작동

, 옵션 모두 작동하지만 사용자뿐만 아니라 동적 드롭 다운의 날짜를 변경하려면 달력에서 날짜를 선택하면

나는 원한다.

여기 내 코드입니다 :

<div class="input-group col-lg-2 col-md-12 col-sm-12 search"> 
 
     <label class="bd-form-label" style="float: left;width: 100%;">Dates</label> 
 
     <select name="name" id="name_id" style="width: 80%;float: left;"> 
 
      <option value="">Any Month</option> 
 
      <option value="October 2017">October 2017</option> 
 
      <option value="November 2017">November 2017</option> 
 
      <option value="December 2017">December 2017</option> 
 
      <option value="January 2018">January 2018</option> 
 
     </select> 
 
     <input type="hidden" id="datepicker" class="hasDatepicker" value="16-Oct-2017" style=""> 
 
      <img class="ui-datepicker-trigger" src="http://jqueryui.com/resources/demos/datepicker/images/calendar.gif" alt="..." title="..."> 
 
    </div>

예컨대 내가 <input type="hidden" />로 내 입력을 가지고 있기 때문에 일정 2019년 10월 선택 옵션에 대한 사용자의 클릭이 10 월 2019 년 표시하는 경우.

그럴 수 있습니까? 아니면이 중 하나를 선호해야합니까?

상관 피드백 값이 드롭 다운 ($('#name_id').val($('#datepicker').val());)를 설정 한 다음 날짜 출력 포맷 ($("#datepicker").datepicker("option", "dateFormat", "MM yy");)를 포맷에 의해 수행 될 수

출처

2017-10-16 Maria

그래서, 당신이 원하는 : 사용자가 2017 23 10 월을 선택하면 드롭 다운 선택 옵션은 2017 10월해야 하는가? –

@MayankPatel 네, 맞습니다. 그리고 더 나은 옵션을 달 앞에 추가하고 둘 다 변경할 수 있다면 – Maria

도움이 될 것이다. 시도 코드보다 실행이

<!doctype html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <title>jQuery UI Datepicker - Format date</title> 
 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
    <script> 
 
    $(function() { 
 
    $("#datepicker").datepicker(); 
 
\t //Below line will set format for date "Month year" .Note This format is custom,according to the drop down value 
 
     $("#datepicker").datepicker("option", "dateFormat", "MM yy"); 
 
\t //On change of Date from date picker, this will set value in select dropdown 
 
\t $('#datepicker').change(function(){ 
 
\t \t \t $('#name_id').val($('#datepicker').val()); 
 
     }); 
 
    }); 
 
    
 
    
 
    </script> 
 
</head> 
 
<body> 
 
    
 
<p>Calendar: <input type="text" id="datepicker" size="30"></p> 
 
    
 

 
<div class="input-group col-lg-2 col-md-12 col-sm-12 search"> 
 
     <label class="bd-form-label" style="float: left;width: 100%;">Dates</label> 
 
     <select name="name" id="name_id" style="width: 80%;float: left;"> 
 
      <option value="">Any Month</option> 
 
      <option value="October 2017">October 2017</option> 
 
      <option value="November 2017">November 2017</option> 
 
      <option value="December 2017">December 2017</option> 
 
      <option value="January 2018">January 2018</option> 
 
     </select> 
 
</div> 
 
    
 
    
 
</body> 
 
</html>

출처

2017-10-16 13:07:59

캘린더에서 2017 년 1 월을 선택하면 2017 년 1 월이 날짜 드롭 다운에 삽입되지 않습니다. –

드롭 다운에는 2017 년이 아닌 2018 년 1 월의 정적 값이 있기 때문에 2018 년 1 월부터 날짜를 선택하면 드롭 다운이 채워집니다. 정적 드롭 다운에서 특정 월 값을 추가 할 수 있습니다. –

오! 알았어. 고맙습니다. –

는 첫째, 내가 날짜 해석 순간 라이브러리를 사용하고 있음을 말하고 싶어 니펫을.

코드 (CDN)에 아래 링크 만 포함하면됩니다.

https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js.

지금, 나는 그것을 initialization.In 날짜 선택을위한 UI를 jQuery-날짜 선택기를 사용하고, 내가 선택한 날짜를 얻기 위해 onSelect 변경 이벤트를 사용했다.

그런 다음 나는 월과 연도를 MMMM-YYYY 형식으로 사용했습니다.

그리고 마지막으로, 나는 옵션이 이미 존재하는 경우 드롭 불통이 옵션도

그래서 드롭 다운에 삽입하지 마십시오 확인 설정, 당신이 선택하게됩니다 어떤 날짜, 그 달이 될 것입니다 드롭 다운에 삽입되고 선택됩니다.

다음은 바이올린 링크입니다.

Fiddle link

것은 당신의 requirements.Thanks에 맞는 알려줘!

$('#date1').datepicker({ 
 
    changeMonth: true, 
 
    changeYear: true, 
 
    showButtonPanel: true, 
 
    dateFormat: "mm/dd/yy", 
 
    onSelect: function(dateText) { 
 
    var monthObj=moment(dateText,"MM/DD/YYYY"); 
 
    var drop_option=monthObj.format('MMMM YYYY'); 
 
    if($("#name_id option[value='"+drop_option+"']").length == 0){ 
 
    \t $('#name_id').append('<option value="'+drop_option+'">' + drop_option + '</option>'); 
 
    } 
 
    \t $("#name_id option[value='"+drop_option+"']").prop('selected', true); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script> 
 
<div class="input-group col-lg-2 col-md-12 col-sm-12 search"> 
 
     <label class="bd-form-label" style="float: left;width: 100%;">Dates</label> 
 
     <select name="name" id="name_id" style="width: 80%;float: left;"> 
 
      <option value="">Any Month</option> 
 
      <option value="October 2017">October 2017</option> 
 
      <option value="November 2017">November 2017</option> 
 
      <option value="December 2017">December 2017</option> 
 
      <option value="January 2018">January 2018</option> 
 
     </select> 
 
     <input type="hidden" id="datepicker" class="hasDatepicker" value="16-Oct-2017" style=""> 
 
      <img class="ui-datepicker-trigger" src="http://jqueryui.com/resources/demos/datepicker/images/calendar.gif" alt="..." title="..."> 
 
    </div> 
 
    <input type="text" id="date1" name="date1"/> <br/>

출처

2017-10-16 13:09:34

드롭 다운 선택 옵션 변경 datepicker select에 따라 달라짐

답변

관련 문제