JQuery - вопросы по Datepicker

Question

HTML:

Start Date: <input type="text" name="startDate" id="datepicker6" value="" /> 

Jquery:

$("#datepicker6").datepicker({ 
    dateFormat: 'M yy', 
    changeMonth: true, 
    changeYear: true, 
    showButtonPanel: true, 
    yearRange: '2000:'+(new Date).getFullYear(), 
    beforeShow: function(){ 
     $('#hideMonth').html('.ui-datepicker-calendar{display:none;}'); 
    }, 
     onClose: function(dateText, inst) 
    { 
     $(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, inst.selectedDay)); 
    } 
}); 

Мой выходной ток для DatePicker:

Вот мой вопрос:
(1)

Если я нажму текстовое поле, выберите месяц и год из выпадающего списка и нажмите кнопку «Готово», текстовое поле должно показать значение. Если я нажимаю текстовое поле, я выхожу за пределы datepicker, текстовое поле не должно показывать значение. Как мне изменить?

(2)

После того как я выбрать месяц и год из выпадающего списка, когда в следующий раз я выбираю, как я должен установить значение в раскрывающемся списке?

Answer 1

Чтобы удалить весь день месяца это простое решение использовать CSS время, чтобы управлять событием нажатия на кнопке или вне DatePicker для обработки и ошибки и repropose самого DatePicker мое предложение:

$(document).on('mousedown', function(e) { 
 
    var datepickObj = $('.ui-datepicker'); 
 
    if (datepickObj.is(':visible')) { 
 
    var target = (e.target) ? e.target : e.srcElement; 
 
    if (datepickObj.find(target).length > 0) { 
 
     return; 
 
    } 
 
    e.preventDefault(); 
 
    e.stopImmediatePropagation(); 
 
    $("#datepicker6").val(''); 
 
    if ($('.error').length == 0) { 
 
     datepickObj.css({'top': datepickObj.position().top + 20 + 'px'}); 
 
     $("#datepicker6").after("<div class='error'>The value must be set</div>"); 
 
    } 
 
    } 
 
}); 
 
$(function() { 
 
    $("#datepicker6").datepicker({ 
 
    dateFormat: 'M yy', 
 
    changeMonth: true, 
 
    changeYear: true, 
 
    showButtonPanel: true, 
 
    yearRange: '2000:'+(new Date).getFullYear(), 
 
    onClose: function(dateText, inst) { 
 
     var e = window.event || window.Event; 
 
     var target = (e.target) ? e.target : e.srcElement; 
 
     if ($(target).is('button.ui-datepicker-close')) { 
 
     $('.error').remove(); 
 
     var newDate = new Date(inst.selectedYear, inst.selectedMonth, inst.selectedDay); 
 
     $(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, inst.selectedDay)); 
 
     } 
 
    } 
 
    }); 
 
});

.ui-datepicker-calendar { 
 
    display: none; 
 
} 
 
.error { 
 
    color: red; 
 
    margin-bottom: 20px; 
 
}

<link href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.min.css" rel="stylesheet"/> 
 
<script src="//code.jquery.com/jquery-1.11.3.js"></script> 
 
<script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script> 
 

 

 
<form> 
 
    Start Date:<br> 
 
    <input type="text" name="startDate" id="datepicker6" value="" /> 
 
    <br> 
 
</form>

Answer 2

Вместо того, чтобы установить дату onClose установите дату onChangeMonthYear Так как вы хотите использовать кнопку Done, может быть что-то вроде этого:

var monthOrYearChanged = false; 

$("#datepicker6").datepicker({ 
    dateFormat: 'M yy', 
    changeMonth: true, 
    changeYear: true, 
    showButtonPanel: true, 
    yearRange: '2000:'+(new Date).getFullYear(), 
    beforeShow: function(){ 
     $('#hideMonth').html('.ui-datepicker-calendar{display:none;}'); 
    }, 
    onChangeMonthYear: function(year, month, inst) { 
     monthOrYearChanged = true; 
    }, 
    onClose: function(dateText, inst) 
    { 
     if(monthOrYearChanged){ 
      $(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, inst.selectedDay)); 
      monthOrYearChanged = false; 
     } 
    } 
}); 

Что касается второго вопроса, если я не ошибаюсь, это уже автоматически обрабатывается DatePicker.

Answer 3

Выбор даты

$(document).ready(function() { 
     var year_month=''; 

     $('.date-picker').datepicker({ 
      changeMonth: true, 
      changeYear: true, 
      showButtonPanel: true, 
      dateFormat: 'yy-mm', 
      onClose: function(dateText, inst) { 
       $(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1)); 
});