Results 1 to 4 of 4

Thread: Customize jquery datepicker year & month select option

  1. #1
    Join Date
    Jul 2009
    Location
    Binus University
    Posts
    460
    Thanks
    78
    Thanked 21 Times in 21 Posts

    Lightbulb Customize jquery datepicker year & month select option

    Hi, everyone.
    So this is my problem:
    How to customize the select option in jquery datepicker?
    Script: http://jqueryui.com/datepicker/#dropdown-month-year
    The next & previous button fully customize because they are using image, but there's no information how to change the select option style.
    Is there any suggestion?

    Thank you so much.
    _____________________

    David Demetrius // davejob
    _____________________

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,133
    Thanks
    44
    Thanked 3,229 Times in 3,190 Posts
    Blog Entries
    12

    Default

    The styles for datepicker are in the jquery-ui.css file. There are many themes available, or one can make a custom theme by editing one of the existing jquery-ui.css files. To see what's available, go to the page you link to in your post then click on Themes. That will take you to the ThemeRoller page. On the left is a widget that will allow you to make your own custom theme ,(Roll Your Own) button, or choose from many available themes, (Gallery) button.

    Be sure to check the Gallery button first. There are so many choices, and even if none are perfect, you can edit one before or after downloading it.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jul 2009
    Location
    Binus University
    Posts
    460
    Thanks
    78
    Thanked 21 Times in 21 Posts

    Default

    Yes i know there's alot of themes for datepicker. But none of that themes customize the input select option like my screenshot below:
    Click image for larger version. 

Name:	67ErCVY.jpg 
Views:	63 
Size:	13.1 KB 
ID:	5435

    The other problem, i can't find the class to limit this dropdown option.
    Click image for larger version. 

Name:	kbVDqYf.jpg 
Views:	55 
Size:	28.9 KB 
ID:	5436
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	1.jpg 
Views:	55 
Size:	14.2 KB 
ID:	5434  
    _____________________

    David Demetrius // davejob
    _____________________

  4. #4
    Join Date
    Jul 2009
    Location
    Binus University
    Posts
    460
    Thanks
    78
    Thanked 21 Times in 21 Posts

    Default

    I also find this script, everything perfect. Except i need to change how the calendar show by calling it with class not ID. So how to change it?

    This is the online version: http://davejob.com/date/

    Code:
    	<script>
    		var myCalendar;
    		function doOnLoad() {
    			myCalendar = new dhtmlXCalendarObject(["calendar"]);
    		}
    	</script>
    
    	<div style="position:relative;height:280px;">
    		<input type="text" id="calendar">
    	</div>
    _____________________

    David Demetrius // davejob
    _____________________

Similar Threads

  1. Replies: 0
    Last Post: 08-30-2012, 04:45 PM
  2. Replies: 1
    Last Post: 08-09-2011, 07:29 AM
  3. Replies: 0
    Last Post: 10-15-2010, 10:06 PM
  4. Customize CSS menu to select the cell
    By devtolu in forum CSS
    Replies: 8
    Last Post: 09-19-2009, 11:23 AM
  5. Replies: 2
    Last Post: 04-10-2008, 04:07 PM

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •