CODEWITHSUNDEEP
javascriptjqueryangularjs
Anand Ram
Anand Ram

Reputation: 535

How to use JQuery DatePicker or angularJS to display days of the week alone?

I'm working on a project that needs me to do three things depending on the options chosen. The options in a dropdown are Daily, Weekly, Monthly, and Yearly.

If Weekly is chosen, I just need the days of the week to be displayed as buttons.

If Monthly is chosen, I just need the dates (1-31) to be displayed as buttons.

If Yearly is chosen, I just need the months of the year to be displayed as buttons.

Can I use options in datepicker or angularJS (I'm still learning angularJS) to get this to work?

Note that, once I choose the option from the dropdown, I will prefer the buttons to populate in the div I specify (meaning, I won't be clicking on an input box to display a calendar).

If there is an alternative to datepicker or calendarUI, I would be willing to try that as well. Please help me with this. Thanks in advance for all the suggestions.

Upvotes: 0

Views: 161

Answers (1)

lpg
lpg

Reputation: 4937

You can try with something like this (Fiddle demo):

var days = ['Mon','Tues','Wed','Thu','Fri','Sat','Sun'];

function getContent(dateScope)
{
    var ret = "";
    switch(dateScope) {
        case "w": for(i in days)
            ret += "<button>"+days[i]+"</button>";
            break;
        case "m": for(i=1;i<=31;i++)
            ret += "<button>"+i+"</button>";
            break;
        case "y": for(i=1;i<=12;i++)
            ret += "<button>"+i+"</button>";
            break;
    }
    return ret;
}

$("#dateScope").change(function(){
    $("#buttonsDiv").html(getContent($(this).val()));
});

Upvotes: 1

Related Questions