Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Getting a Jquery selector for month and day only

First at all, thanks for all the help you can give me and sorry for my English since it's not my native language.

I am looking for a solution (with jquery selectpicker or another plugin) that allow me to set up a textfield and restrict the user to select only a day and a month.

Explanation: I have a case when the user set a yearly recurrent reminder, so I have a field that will allow him to select the day and the month of those yearly reminders. I have look a lot and I haven't been able to find what I am looking for. Right now this is my best approach (the code is not mine) http://jsfiddle.net/DBpJe/7755/.

I tried to change the code to this:

$(function() {
$('.date-picker').datepicker( {
    changeMonth: true,
    changeYear: false,
    changeDay: true,
    showButtonPanel: true,
    dateFormat: 'dd MM',
    onClose: function(dateText, inst) { 
        $(this).datepicker('setDate', new Date(inst.selectedMonth, inst.selectedDay, 1));
    }
});
});

But without luck.

is there any way I can accomplish this? I was thinking a simple select, but I want to make it better than that. Also, I could leave the selecpicker just the way it is and in the dateFormat parameter use 'dd MM', but when the user opens the calendar it will display the year and that will cause confusion.

Thanks in advance all help you can give me.

like image 683
arkofdan Avatar asked Oct 23 '25 08:10

arkofdan


1 Answers

Modified to do what I think you're after:

http://jsfiddle.net/f6neo7ns/1/

$('.date-picker').datepicker({
    changeMonth: true,
    showButtonPanel: true,
    dateFormat: 'dd MM',
    onClose: function(dateText, inst) { 
        $(this).datepicker('setDate', new Date(inst.selectedYear,inst.selectedMonth, inst.selectedDay));
    }
});
  • Removing the CSS will show the day picker.
  • JS is changed to return the full picked date in the format dd MM

If you want to hide the year completely, you can simply add this CSS:

.ui-datepicker-year{display: none}

As seen here: http://jsfiddle.net/f6neo7ns/2/

like image 89
DBS Avatar answered Oct 25 '25 20:10

DBS