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 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. 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. Link to comment https://forums.phpfreaks.com/topic/278724-calendar-in-js/#findComment-1434450 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.