Question

28

jquery date picker but day month and year in separate dropdowns

rated 0 times [ 34] [ 6] / answers: 1 / hits: 27199 / 12 Years ago, mon, june 4, 2012, 12:00:00

I am working on a jquery date picker. I need to select a date but after date selection from the calendar I need the date to divide into three separate drop downs. One for day one for month and one for year. Here is my jquery script.

  <script type=text/javascript>

    $(document).ready(function() {



   $(function() {

    $( #fullDate ).datepicker({

    onClose: function(dateText, inst) {

       $('#day').val( dateText.split('/')[2] );

       $('#month').val( dateText.split('/')[1] );

   $('#year').val( dateText.split('/')[0] );

    }

 });

});

}); 

</script>

HTML

<div class=demo>



<p>Date: <input id=fullDate type=text style=display:block></p>

day:<select name=day id=day style=width:100px>

<option>1</option>

<option>2</option>

<option>3</option>

<option>4</option>

<option>5</option>

</select>



 month:<select name=month id=month style=width:100px>

 <option>1</option>

 <option>2</option>

  <option>3</option>

 <option>4</option>

 <option>5</option>

 </select>



year:<select name=year id=year style=width:100px>

<option>1</option>

<option>2</option>

<option>3</option>

<option>4</option>

<option>5</option>

</select>

</div><!-- End demo -->

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

benitoh

Add To Favorites

Follow

Total Points: 150

Total Questions: 113

Total Answers: 104

Location: India

Member since Wed, Aug 26, 2020

4 Years ago

benitoh questions

1 this.$refs empty with Vue 3 Options API

Sun, Mar 21, 21, 00:00, 3 Years ago

1 Close sidebar menu when click outside of it and when click on menu item

Fri, May 22, 20, 00:00, 4 Years ago

1 TypeORM Custom Repository, select distinct values from specified column

Mon, May 4, 20, 00:00, 4 Years ago

1 How can I enable the console log in VUE-CLI during development

Tue, Dec 17, 19, 00:00, 5 Years ago

1 String interpolation in graphQL query

Mon, May 13, 19, 00:00, 5 Years ago

View All

answered 12 Years ago hector · Accepted Answer

Working demo please click here : ] http://jsfiddle.net/gvAbv/13/ or http://jsfiddle.net/gvAbv/8/

In demo click on the text box and select dates and bingo you will get the drop downs auto populated.

Point to note dateText.split('/')[2] is year not day :) if you will switch over the place your code will work.

i.e. dateText.split('/')[2] : year ; dateText.split('/')[0] : month ; dateText.split('/')[0] : day rest demo will help you to make it clear.

The demo has extra bits but it will help you!

code

$(function() {

    $(#fullDate).datepicker({

        onClose: function(dateText, inst) {

            $('#year').val(dateText.split('/')[2]);

            $('#month').val(dateText.split('/')[0]);

            $('#day').val(dateText.split('/')[1]);

        }

    });

});

ANother Demo for image click: http://jsfiddle.net/zwwY7/

code

$(function() {

    $(#fullDate).datepicker({

         buttonImage: 'icon_star.jpg',

        buttonImageOnly: true,

        onClose: function(dateText, inst) {

            $('#year').val(dateText.split('/')[2]);

            $('#month').val(dateText.split('/')[0]);

            $('#day').val(dateText.split('/')[1]);

        }

    });

});

Images
enter

enter