phpgoal Posted June 3, 2013 Share Posted June 3, 2013 Hello, I am trying to have a calendar in my site which should have below functionality: 1. Select a year from 2013 to 2023 from a given calendar. 2. Once a year is selected (ex-2013), 12 links displayed as Jan, Feb, Mar, Apr.... Dec. 3. Once a month is clicked (ex-Jan), Jan page is displayed in the web site. How can i do it in Javascript or I should other language? I am new to JS if you could provide me some tips as for how to do it, it would be great. Many Thanks. -P Quote Link to comment https://forums.phpfreaks.com/topic/278724-calendar-in-js/ Share on other sites More sharing options...
Irate Posted June 4, 2013 Share Posted June 4, 2013 Check out jQiery, the most well-known JavaScript framework and its UI, it contains many intuitive and easy to use preprogrammed widgets like the calendar widget you're looking for. Quote Link to comment https://forums.phpfreaks.com/topic/278724-calendar-in-js/#findComment-1433962 Share on other sites More sharing options...
phpgoal Posted June 6, 2013 Author Share Posted June 6, 2013 Hello, I got the below code working. My question is when I select a month and year, How can I link a page to that? That means, if some one selects Jun 2013, I want page1.html opens, selects Jul 2013, i want page2.html opens. Please advise. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script> <link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css"> <script type="text/javascript"> $(function() { $('.date-picker').datepicker( { changeMonth: true, changeYear: true, showButtonPanel: true, dateFormat: 'MM yy', onClose: function(dateText, inst) { var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val(); var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val(); $(this).datepicker('setDate', new Date(year, month, 1)); }, beforeShow : function(input, inst) { if ((datestr = $(this).val()).length > 0) { year = datestr.substring(datestr.length-4, datestr.length); month = jQuery.inArray(datestr.substring(0, datestr.length-5), $(this).datepicker('option', 'monthNames')); $(this).datepicker('option', 'defaultDate', new Date(year, month, 1)); $(this).datepicker('setDate', new Date(year, month, 1)); } } }); }); </script> <style> .ui-datepicker-calendar { display: none; } </style></head><body> <label for="startDate">Date :</label> <input name="startDate" id="startDate" class="date-picker" /></body></html> Thanks. Quote Link to comment https://forums.phpfreaks.com/topic/278724-calendar-in-js/#findComment-1434450 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.