meow meow - 22 days ago 6
Javascript Question

enable to set the input value inside dropdown of datepicker

Below is my code its working cool but i want like in input of datepicker it display January 2016 but inside dropdown of datepicker it display Nov 2016 as selected i want to display same as input field

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

<div class="fleft">
<form method="post">

<input type="text" id="datepicker" class="date-picker" name="month" id="autoclose" placeholder="filter by month" value="<?=$this->session->userdata('months_day_filter')?>" />

</form>
</div>

<table>
<thead>

<th>Name</th>
<th>Absent</th>
<th>Leave</th>

<th>Days</th>
</thead>
<? foreach ($users as $user){ ?>
<tr class="">
<td><?=$user['f_name'] .' '. $user['l_name'] ?></td>
<td ><?=$user['absents']?></td>
<td ><?=$user['leave_count']?></td>
<td ><?=$user['working_days']?></td>

</tr>
<? } ?>

</tbody>

</table>

<script type="text/javascript">
$(function() {
$('#datepicker').datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
//defaultDate: null,
defaultDate: <?=date('y-m')?>,
onClose: function(dateText, inst) {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, month, 1));
//alert(this.value);
$('.month_form').submit();
}

});
});
</script>
<style>
.ui-datepicker-calendar {
display: none;
}
</style>


please help me to set the input value inside dropdown of datepicker

Answer

Its done relace your code with following. or add monthNamesShort : fullmonth_array

$(function() {
var fullmonth_array = ["January", "February", "March", "April", "May", "June",
                  "July", "August", "September", "October", "November", "December"];

  $('#datepicker').datepicker({
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    dateFormat: 'MM yy',
    //defaultDate: null,
    defaultDate: "<?=date('y-m')?>",
 monthNamesShort : fullmonth_array,
    onClose: function(dateText, inst) {
         var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
            var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
            $(this).datepicker('setDate', new Date(year, month, 1));
        //alert(this.value);
     $('.month_form').submit();
    }

  });
});