CODEWITHSUNDEEP
javascriptjqueryjquery-uijquery-selectors
Mellon
Mellon

Reputation: 38852

The efficient code to implement this feature

In my page, I have three input fields, "start date", "end date" and "colors" drop-down menu,like follows:

<label>Start date (yyyy-mm-dd):</label>
<input id='start_date' type='text'></input>
<br>
<label>End date (yyyy-mm-dd):</label>
<input id='end_date' type='text'></input>
<br>
<label>Color:</label>
<select id="color">
    <option value="white" selected="selected">White</option>
    <option value="black">Black</option>
    <option value="red">Red</option>
    <option value="green">Green</option>
    <option value="green">Transparent</option>
</select>

I would like to have the following feature for this UI:

  1. If date span defined by "start date" and "end date" is a past period (i.e. <= today), the "color" drop-down menu should only show 'Black' and 'White' options.

  2. If date span defines a future period (>today), the "color" drop-down only show 'red' and 'green' options.

  3. If date span contain past days and future days, the "color" drop-down only show 'Transparent' option.

How to implement this features with efficient, elegant jQuery/javascript code?

My current jQuery code:

$("#end_date").click(update_options())

function update_options(){
    var start_date = $("#start_date").val();
    var end_date = $("#end_date").val();

    var startDate= new Date(start_date);
    var endDate= new Date(end_date);
    var today = new Date().setHours(0, 0, 0, 0);

    if(endDate < today){
        $('#color').get(2,3,4).remove()
    }
    else if(startDate<=today && endDate>=today){
        $('#color').get(0,1,2,3).remove()
    }
    else{
        $('#color').get(0,1,4).remove()
    }

}

Which seems not working correctly and not elegant

Upvotes: 0

Views: 123

Answers (1)

no.good.at.coding
no.good.at.coding

Reputation: 20371

Any one of these plugins might be what you're looking for.

Upvotes: 1

Related Questions