Foros del Web » Programando para Internet » Jquery »

calendario jquery

Estas en el tema de calendario jquery en el foro de Jquery en Foros del Web. hola, nuevamente molestando pero tengo un detalle, tengo una pagina que muestra 2 calendarios, ambos solo dejan seleccionar fechas del dia de hoy en adelante, ...
  #1 (permalink)  
Antiguo 26/01/2012, 16:05
 
Fecha de Ingreso: enero-2012
Mensajes: 64
Antigüedad: 12 años, 10 meses
Puntos: 0
calendario jquery

hola, nuevamente molestando pero tengo un detalle, tengo una pagina que muestra 2 calendarios, ambos solo dejan seleccionar fechas del dia de hoy en adelante, no permiten seleccionar fechas anteriores al dia de hoy, lo que necesito es que el primer calendario permita seleccionar fechas pasadas hasta la fecha actual, mientras que el segundo permita seleccionar cualquier fecha, presento los codigos de ambos archivos que tengo, me pueden orientar sugiriendo que debo modificar?

Cita:
index.htm
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />

<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
Remove this if you use the .htaccess -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

<title>SISDOC</title>
<meta name="description" content="" />
<meta name="author" content="moises.sevilla" />

<meta name="viewport" content="width=device-width; initial-scale=1.0" />

<!-- jQuery -->

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>

<!-- required plugins -->

<script type="text/javascript" src="js/date.js"></script>

<!--[if IE]><script type="text/javascript" src="scripts/jquery.bgiframe.min.js"></script><![endif]-->

<!-- jquery.datePicker.js -->

<script type="text/javascript" src="js/jquery.datePicker.js"></script>

<!-- datePicker required styles -->

<link rel="stylesheet" type="text/css" media="screen" href="css/datePicker.css">

<!-- page specific scripts -->

<script type="text/javascript" charset="utf-8">

$(function()

{

$('.turn-me-into-datepicker')

.datePicker({inline:true})

.bind(

'dateSelected',

function(e, selectedDate, $td)

{

console.log('You selected ' + selectedDate);

}

);

});



</script>



<style type="text/css">



.turn-me-into-datepicker {

/*float: left;
*/
margin: 10px;

}



</style>


</head>

<body>




<ul>
</ul>
<div><center>
<div class="turn-me-into-datepicker">
The contents of this div will be replaced by the inline datePicker.
</div>
<div class="turn-me-into-datepicker">
The contents of this div will be replaced by the inline datePicker.


</body>
</html>
  #2 (permalink)  
Antiguo 26/01/2012, 16:09
 
Fecha de Ingreso: enero-2012
Mensajes: 64
Antigüedad: 12 años, 10 meses
Puntos: 0
Respuesta: calendario jquery

Código Javascript:
Ver original
  1. (function($){
  2.    
  3.     $.fn.extend({
  4.  
  5.         renderCalendar  :   function(s)
  6.         {
  7.             var dc = function(a)
  8.             {
  9.                 return document.createElement(a);
  10.             };
  11.  
  12.             s = $.extend({}, $.fn.datePicker.defaults, s);
  13.            
  14.             if (s.showHeader != $.dpConst.SHOW_HEADER_NONE) {
  15.                 var headRow = $(dc('tr'));
  16.                 for (var i=Date.firstDayOfWeek; i<Date.firstDayOfWeek+7; i++) {
  17.                     var weekday = i%7;
  18.                     var day = Date.dayNames[weekday];
  19.                     headRow.append(
  20.                         jQuery(dc('th')).attr({'scope':'col', 'abbr':day, 'title':day, 'class':(weekday == 0 || weekday == 6 ? 'weekend' : 'weekday')}).html(s.showHeader == $.dpConst.SHOW_HEADER_SHORT ? day.substr(0, 1) : day)
  21.                     );
  22.                 }
  23.             };
  24.            
  25.             var calendarTable = $(dc('table'))
  26.                                     .attr(
  27.                                         {
  28.                                             'cellspacing':2
  29.                                         }
  30.                                     )
  31.                                     .addClass('jCalendar')
  32.                                     .append(
  33.                                         (s.showHeader != $.dpConst.SHOW_HEADER_NONE ?
  34.                                             $(dc('thead'))
  35.                                                 .append(headRow)
  36.                                             :
  37.                                             dc('thead')
  38.                                         )
  39.                                     );
  40.             var tbody = $(dc('tbody'));
  41.            
  42.             var today = (new Date()).zeroTime();
  43.             today.setHours(12);
  44.            
  45.             var month = s.month == undefined ? today.getMonth() : s.month;
  46.             var year = s.year || today.getFullYear();
  47.            
  48.             var currentDate = (new Date(year, month, 1, 12, 0, 0));
  49.            
  50.            
  51.             var firstDayOffset = Date.firstDayOfWeek - currentDate.getDay() + 1;
  52.             if (firstDayOffset > 1) firstDayOffset -= 7;
  53.             var weeksToDraw = Math.ceil(( (-1*firstDayOffset+1) + currentDate.getDaysInMonth() ) /7);
  54.             currentDate.addDays(firstDayOffset-1);
  55.            
  56.             var doHover = function(firstDayInBounds)
  57.             {
  58.                 return function()
  59.                 {
  60.                     if (s.hoverClass) {
  61.                         var $this = $(this);
  62.                         if (!s.selectWeek) {
  63.                             $this.addClass(s.hoverClass);
  64.                         } else if (firstDayInBounds && !$this.is('.disabled')) {
  65.                             $this.parent().addClass('activeWeekHover');
  66.                         }
  67.                     }
  68.                 }
  69.             };
  70.             var unHover = function()
  71.             {
  72.                 if (s.hoverClass) {
  73.                     var $this = $(this);
  74.                     $this.removeClass(s.hoverClass);
  75.                     $this.parent().removeClass('activeWeekHover');
  76.                 }
  77.             };
  78.  
  79.             var w = 0;
  80.             while (w++<weeksToDraw) {
  81.                 var r = jQuery(dc('tr'));
  82.                 var firstDayInBounds = s.dpController ? currentDate > s.dpController.startDate : false;
  83.                 for (var i=0; i<7; i++) {
  84.                     var thisMonth = currentDate.getMonth() == month;
  85.                     var d = $(dc('td'))
  86.                                 .text(currentDate.getDate() + '')
  87.                                 .addClass((thisMonth ? 'current-month ' : 'other-month ') +
  88.                                                     (currentDate.isWeekend() ? 'weekend ' : 'weekday ') +
  89.                                                     (thisMonth && currentDate.getTime() == today.getTime() ? 'today ' : '')
  90.                                 )
  91.                                 .data('datePickerDate', currentDate.asString())
  92.                                 .hover(doHover(firstDayInBounds), unHover)
  93.                             ;
  94.                     r.append(d);
  95.                     if (s.renderCallback) {
  96.                         s.renderCallback(d, currentDate, month, year);
  97.                     }
  98.                    
  99.                     currentDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate()+1, 12, 0, 0);
  100.                 }
  101.                 tbody.append(r);
  102.             }
  103.             calendarTable.append(tbody);
  104.            
  105.             return this.each(
  106.                 function()
  107.                 {
  108.                     $(this).empty().append(calendarTable);
  109.                 }
  110.             );
  111.         },
  112.  
  113.         datePicker : function(s)
  114.         {          
  115.             if (!$.event._dpCache) $.event._dpCache = [];
  116.            
  117.             // initialise the date picker controller with the relevant settings...
  118.             s = $.extend({}, $.fn.datePicker.defaults, s);
  119.            
  120.             return this.each(
  121.                 function()
  122.                 {
  123.                     var $this = $(this);
  124.                     var alreadyExists = true;
  125.                    
  126.                     if (!this._dpId) {
  127.                         this._dpId = $.guid++;
  128.                         $.event._dpCache[this._dpId] = new DatePicker(this);
  129.                         alreadyExists = false;
  130.                     }
  131.                    
  132.                     if (s.inline) {
  133.                         s.createButton = false;
  134.                         s.displayClose = false;
  135.                         s.closeOnSelect = false;
  136.                         $this.empty();
  137.                     }
  138.                    
  139.                     var controller = $.event._dpCache[this._dpId];
  140.                    
  141.                     controller.init(s);
  142.                    
  143.                     if (!alreadyExists && s.createButton) {
  144.                         // create it!
  145.                         controller.button = $('<a href="#" class="dp-choose-date" title="' + $.dpText.TEXT_CHOOSE_DATE + '">' + $.dpText.TEXT_CHOOSE_DATE + '</a>')
  146.                                 .bind(
  147.                                     'click',
  148.                                     function()
  149.                                     {
  150.                                         $this.dpDisplay(this);
  151.                                         this.blur();
  152.                                         return false;
  153.                                     }
  154.                                 );
  155.                         $this.after(controller.button);
  156.                     }
  157.                    
  158.                     if (!alreadyExists && $this.is(':text')) {
  159.                         $this
  160.                             .bind(
  161.                                 'dateSelected',
  162.                                 function(e, selectedDate, $td)
  163.                                 {
  164.                                     this.value = selectedDate.asString();
  165.                                 }
  166.                             ).bind(
  167.                                 'change',
  168.                                 function()
  169.                                 {
  170.                                     if (this.value == '') {
  171.                                         controller.clearSelected();
  172.                                     } else {
  173.                                         var d = Date.fromString(this.value);
  174.                                         if (d) {
  175.                                             controller.setSelected(d, true, true);
  176.                                         }
  177.                                     }
  178.                                 }
  179.                             );
  180.                         if (s.clickInput) {
  181.                             $this.bind(
  182.                                 'click',
  183.                                 function()
  184.                                 {
  185.                                     // The change event doesn't happen until the input loses focus so we need to manually trigger it...
  186.                                     $this.trigger('change');
  187.                                     $this.dpDisplay();
  188.                                 }
  189.                             );
  190.                         }
  191.                         var d = Date.fromString(this.value);
  192.                         if (this.value != '' && d) {
  193.                             controller.setSelected(d, true, true);
  194.                         }
  195.                     }
  196.                    
  197.                     $this.addClass('dp-applied');
  198.                    
  199.                 }
  200.             )
  201.         },
  #3 (permalink)  
Antiguo 26/01/2012, 16:11
 
Fecha de Ingreso: enero-2012
Mensajes: 64
Antigüedad: 12 años, 10 meses
Puntos: 0
Respuesta: calendario jquery

Código Javascript:
Ver original
  1. dpSetDisabled : function(s)
  2.         {
  3.             return _w.call(this, 'setDisabled', s);
  4.         },
  5.  
  6.         dpSetStartDate : function(d)
  7.         {
  8.             return _w.call(this, 'setStartDate', d);
  9.         },
  10.  
  11.         dpSetEndDate : function(d)
  12.         {
  13.             return _w.call(this, 'setEndDate', d);
  14.         },
  15.  
  16.         dpGetSelected : function()
  17.         {
  18.             var c = _getController(this[0]);
  19.             if (c) {
  20.                 return c.getSelected();
  21.             }
  22.             return null;
  23.         },
  24.  
  25.         dpSetSelected : function(d, v, m, e)
  26.         {
  27.             if (v == undefined) v=true;
  28.             if (m == undefined) m=true;
  29.             if (e == undefined) e=true;
  30.             return _w.call(this, 'setSelected', Date.fromString(d), v, m, e);
  31.         },
  32.  
  33.         dpSetDisplayedMonth : function(m, y)
  34.         {
  35.             return _w.call(this, 'setDisplayedMonth', Number(m), Number(y), true);
  36.         },
  37.  
  38.         dpDisplay : function(e)
  39.         {
  40.             return _w.call(this, 'display', e);
  41.         },
  42.  
  43.         dpSetRenderCallback : function(a)
  44.         {
  45.             return _w.call(this, 'setRenderCallback', a);
  46.         },
  47.  
  48.         dpSetPosition : function(v, h)
  49.         {
  50.             return _w.call(this, 'setPosition', v, h);
  51.         },
  52.  
  53.         dpSetOffset : function(v, h)
  54.         {
  55.             return _w.call(this, 'setOffset', v, h);
  56.         },
  57.  
  58.         dpClose : function()
  59.         {
  60.             return _w.call(this, '_closeCalendar', false, this[0]);
  61.         },
  62.  
  63.         dpRerenderCalendar : function()
  64.         {
  65.             return _w.call(this, '_rerenderCalendar');
  66.         },
  67.         // private function called on unload to clean up any expandos etc and prevent memory links...
  68.         _dpDestroy : function()
  69.         {
  70.             // TODO - implement this?
  71.         }
  72.     });
  73.    
  74.    
  75.     var _w = function(f, a1, a2, a3, a4)
  76.     {
  77.         return this.each(
  78.             function()
  79.             {
  80.                 var c = _getController(this);
  81.                 if (c) {
  82.                     c[f](a1, a2, a3, a4);
  83.                 }
  84.             }
  85.         );
  86.     };
  87.    
  88.     function DatePicker(ele)
  89.     {
  90.         this.ele = ele;
  91.        
  92.         // initial values...
  93.         this.displayedMonth     =   null;
  94.         this.displayedYear      =   null;
  95.         this.startDate          =   null;
  96.         this.endDate            =   null;
  97.         this.showYearNavigation =   null;
  98.         this.closeOnSelect      =   null;
  99.         this.displayClose       =   null;
  100.         this.rememberViewedMonth=   null;
  101.         this.selectMultiple     =   null;
  102.         this.numSelectable      =   null;
  103.         this.numSelected        =   null;
  104.         this.verticalPosition   =   null;
  105.         this.horizontalPosition =   null;
  106.         this.verticalOffset     =   null;
  107.         this.horizontalOffset   =   null;
  108.         this.button             =   null;
  109.         this.renderCallback     =   [];
  110.         this.selectedDates      =   {};
  111.         this.inline             =   null;
  112.         this.context            =   '#dp-popup';
  113.         this.settings           =   {};
  114.     };
  115.     $.extend(
  116.         DatePicker.prototype,
  117.         {  
  118.             init : function(s)
  119.             {
  120.                 this.setStartDate(s.startDate);
  121.                 this.setEndDate(s.endDate);
  122.                 this.setDisplayedMonth(Number(s.month), Number(s.year));
  123.                 this.setRenderCallback(s.renderCallback);
  124.                 this.showYearNavigation = s.showYearNavigation;
  125.                 this.closeOnSelect = s.closeOnSelect;
  126.                 this.displayClose = s.displayClose;
  127.                 this.rememberViewedMonth =  s.rememberViewedMonth;
  128.                 this.selectMultiple = s.selectMultiple;
  129.                 this.numSelectable = s.selectMultiple ? s.numSelectable : 1;
  130.                 this.numSelected = 0;
  131.                 this.verticalPosition = s.verticalPosition;
  132.                 this.horizontalPosition = s.horizontalPosition;
  133.                 this.hoverClass = s.hoverClass;
  134.                 this.setOffset(s.verticalOffset, s.horizontalOffset);
  135.                 this.inline = s.inline;
  136.                 this.settings = s;
  137.                 if (this.inline) {
  138.                     this.context = this.ele;
  139.                     this.display();
  140.                 }
  141.             },
  142.             setStartDate : function(d)
  143.             {
  144.                 if (d) {
  145.                     if (d instanceof Date) {
  146.                         this.startDate = d;
  147.                     } else {
  148.                         this.startDate = Date.fromString(d);
  149.                     }
  150.                 }
  151.                 if (!this.startDate) {
  152.                     this.startDate = (new Date()).zeroTime();
  153.                 }
  154.                 this.setDisplayedMonth(this.displayedMonth, this.displayedYear);
  155.             },
  156.             setEndDate : function(d)
  157.             {
  158.                 if (d) {
  159.                     if (d instanceof Date) {
  160.                         this.endDate = d;
  161.                     } else {
  162.                         this.endDate = Date.fromString(d);
  163.                     }
  164.                 }
  165.                 if (!this.endDate) {
  166.                     this.endDate = (new Date('12/31/2999')); // using the JS Date.parse function which expects mm/dd/yyyy
  167.                 }
  168.                 if (this.endDate.getTime() < this.startDate.getTime()) {
  169.                     this.endDate = this.startDate;
  170.                 }
  171.                 this.setDisplayedMonth(this.displayedMonth, this.displayedYear);
  172.             },
  173.             setPosition : function(v, h)
  174.             {
  175.                 this.verticalPosition = v;
  176.                 this.horizontalPosition = h;
  177.             },
  178.             setOffset : function(v, h)
  179.             {
  180.                 this.verticalOffset = parseInt(v) || 0;
  181.                 this.horizontalOffset = parseInt(h) || 0;
  182.             },
  183.             setDisabled : function(s)
  184.             {
  185.                 $e = $(this.ele);
  186.                 $e[s ? 'addClass' : 'removeClass']('dp-disabled');
  187.                 if (this.button) {
  188.                     $but = $(this.button);
  189.                     $but[s ? 'addClass' : 'removeClass']('dp-disabled');
  190.                     $but.attr('title', s ? '' : $.dpText.TEXT_CHOOSE_DATE);
  191.                 }
  192.                 if ($e.is(':text')) {
  193.                     $e.attr('disabled', s ? 'disabled' : '');
  194.                 }
  195.             },
  196.             setDisplayedMonth : function(m, y, rerender)
  197.             {
  198.                 if (this.startDate == undefined || this.endDate == undefined) {
  199.                     return;
  200.                 }
  201.                 var s = new Date(this.startDate.getTime());
  202.                 s.setDate(1);
  203.                 var e = new Date(this.endDate.getTime());
  204.                 e.setDate(1);
  205.                
  206.                 var t;
  207.                 if ((!m && !y) || (isNaN(m) && isNaN(y))) {
  208.                     // no month or year passed - default to current month
  209.                     t = new Date().zeroTime();
  210.                     t.setDate(1);
  211.                 } else if (isNaN(m)) {
  212.                     // just year passed in - presume we want the displayedMonth
  213.                     t = new Date(y, this.displayedMonth, 1);
  214.                 } else if (isNaN(y)) {
  215.                     // just month passed in - presume we want the displayedYear
  216.                     t = new Date(this.displayedYear, m, 1);
  217.                 } else {
  218.                     // year and month passed in - that's the date we want!
  219.                     t = new Date(y, m, 1)
  220.                 }
  221.                 // check if the desired date is within the range of our defined startDate and endDate
  222.                 if (t.getTime() < s.getTime()) {
  223.                     t = s;
  224.                 } else if (t.getTime() > e.getTime()) {
  225.                     t = e;
  226.                 }
  227.                 var oldMonth = this.displayedMonth;
  228.                 var oldYear = this.displayedYear;
  229.                 this.displayedMonth = t.getMonth();
  230.                 this.displayedYear = t.getFullYear();
  231.  
  232.                 if (rerender && (this.displayedMonth != oldMonth || this.displayedYear != oldYear))
  233.                 {
  234.                     this._rerenderCalendar();
  235.                     $(this.ele).trigger('dpMonthChanged', [this.displayedMonth, this.displayedYear]);
  236.                 }
  237.             },
  238.             setSelected : function(d, v, moveToMonth, dispatchEvents)
  239.             {
  240.                 if (d < this.startDate || d.zeroTime() > this.endDate.zeroTime()) {
  241.                     // Don't allow people to select dates outside range...
  242.                     return;
  243.                 }
  244.                 var s = this.settings;
  245.                 if (s.selectWeek)
  246.                 {
  247.                     d = d.addDays(- (d.getDay() - Date.firstDayOfWeek + 7) % 7);
  248.                     if (d < this.startDate) // The first day of this week is before the start date so is unselectable...
  249.                     {
  250.                         return;
  251.                     }
  252.                 }
  253.                 if (v == this.isSelected(d)) // this date is already un/selected
  254.                 {
  255.                     return;
  256.                 }
  257.                 if (this.selectMultiple == false) {
  258.                     this.clearSelected();
  259.                 } else if (v && this.numSelected == this.numSelectable) {
  260.                     // can't select any more dates...
  261.                     return;
  262.                 }
  263.                 if (moveToMonth && (this.displayedMonth != d.getMonth() || this.displayedYear != d.getFullYear())) {
  264.                     this.setDisplayedMonth(d.getMonth(), d.getFullYear(), true);
  265.                 }
  266.                 this.selectedDates[d.asString()] = v;
  267.                 this.numSelected += v ? 1 : -1;
  268.                 var selectorString = 'td.' + (d.getMonth() == this.displayedMonth ? 'current-month' : 'other-month');
  269.                 var $td;
  270.                 $(selectorString, this.context).each(
  271.                     function()
  272.                     {
  273.                         if ($(this).data('datePickerDate') == d.asString()) {
  274.                             $td = $(this);
  275.                             if (s.selectWeek)
  276.                             {
  277.                                 $td.parent()[v ? 'addClass' : 'removeClass']('selectedWeek');
  278.                             }
  279.                             $td[v ? 'addClass' : 'removeClass']('selected');
  280.                         }
  281.                     }
  282.                 );
  283.                 $('td', this.context).not('.selected')[this.selectMultiple &&  this.numSelected == this.numSelectable ? 'addClass' : 'removeClass']('unselectable');
  284.                
  285.                 if (dispatchEvents)
  286.                 {
  287.                     var s = this.isSelected(d);
  288.                     $e = $(this.ele);
  289.                     var dClone = Date.fromString(d.asString());
  290.                     $e.trigger('dateSelected', [dClone, $td, s]);
  291.                     $e.trigger('change');
  292.                 }
  293.             },
  294.             isSelected : function(d)
  295.             {
  296.                 return this.selectedDates[d.asString()];
  297.             },
  298.             getSelected : function()
  299.             {
  300.                 var r = [];
  301.                 for(var s in this.selectedDates) {
  302.                     if (this.selectedDates[s] == true) {
  303.                         r.push(Date.fromString(s));
  304.                     }
  305.                 }
  306.                 return r;
  307.             },
  308.             clearSelected : function()
  309.             {
  310.                 this.selectedDates = {};
  311.                 this.numSelected = 0;
  312.                 $('td.selected', this.context).removeClass('selected').parent().removeClass('selectedWeek');
  313.             },
  #4 (permalink)  
Antiguo 26/01/2012, 16:12
 
Fecha de Ingreso: enero-2012
Mensajes: 64
Antigüedad: 12 años, 10 meses
Puntos: 0
Respuesta: calendario jquery

Código Javascript:
Ver original
  1. display : function(eleAlignTo)
  2.             {
  3.                 if ($(this.ele).is('.dp-disabled')) return;
  4.                
  5.                 eleAlignTo = eleAlignTo || this.ele;
  6.                 var c = this;
  7.                 var $ele = $(eleAlignTo);
  8.                 var eleOffset = $ele.offset();
  9.                
  10.                 var $createIn;
  11.                 var attrs;
  12.                 var attrsCalendarHolder;
  13.                 var cssRules;
  14.                
  15.                 if (c.inline) {
  16.                     $createIn = $(this.ele);
  17.                     attrs = {
  18.                         'id'        :   'calendar-' + this.ele._dpId,
  19.                         'class' :   'dp-popup dp-popup-inline'
  20.                     };
  21.  
  22.                     $('.dp-popup', $createIn).remove();
  23.                     cssRules = {
  24.                     };
  25.                 } else {
  26.                     $createIn = $('body');
  27.                     attrs = {
  28.                         'id'        :   'dp-popup',
  29.                         'class' :   'dp-popup'
  30.                     };
  31.                     cssRules = {
  32.                         'top'   :   eleOffset.top + c.verticalOffset,
  33.                         'left'  :   eleOffset.left + c.horizontalOffset
  34.                     };
  35.                    
  36.                     var _checkMouse = function(e)
  37.                     {
  38.                         var el = e.target;
  39.                         var cal = $('#dp-popup')[0];
  40.                        
  41.                         while (true){
  42.                             if (el == cal) {
  43.                                 return true;
  44.                             } else if (el == document) {
  45.                                 c._closeCalendar();
  46.                                 return false;
  47.                             } else {
  48.                                 el = $(el).parent()[0];
  49.                             }
  50.                         }
  51.                     };
  52.                     this._checkMouse = _checkMouse;
  53.                    
  54.                     c._closeCalendar(true);
  55.                     $(document).bind(
  56.                         'keydown.datepicker',
  57.                         function(event)
  58.                         {
  59.                             if (event.keyCode == 27) {
  60.                                 c._closeCalendar();
  61.                             }
  62.                         }
  63.                     );
  64.                 }
  65.                
  66.                 if (!c.rememberViewedMonth)
  67.                 {
  68.                     var selectedDate = this.getSelected()[0];
  69.                     if (selectedDate) {
  70.                         selectedDate = new Date(selectedDate);
  71.                         this.setDisplayedMonth(selectedDate.getMonth(),
  72. selectedDate.getFullYear(), false);
  73.                     }
  74.                 }
  75.                
  76.                 $createIn
  77.                     .append(
  78.                         $('<div></div>')
  79.                             .attr(attrs)
  80.                             .css(cssRules)
  81.                             .append(
  82. //                              $('<a href="#" class="selecteee">aaa</a>'),
  83.                                 $('<h2></h2>'),
  84.                                 $('<div class="dp-nav-prev"></div>')
  85.                                     .append(
  86.                                         $('<a class="dp-nav-prev-year" href="#" title="' + $.dpText.TEXT_PREV_YEAR + '">&lt;&lt;</a>')
  87.                                             .bind(
  88.                                                 'click',
  89.                                                 function()
  90.                                                 {
  91.                                                     return c._displayNewMonth.call(c, this, 0, -1);
  92.                                                 }
  93.                                             ),
  94.                                         $('<a class="dp-nav-prev-month" href="#" title="' + $.dpText.TEXT_PREV_MONTH + '">&lt;</a>')
  95.                                             .bind(
  96.                                                 'click',
  97.                                                 function()
  98.                                                 {
  99.                                                     return c._displayNewMonth.call(c, this, -1, 0);
  100.                                                 }
  101.                                             )
  102.                                     ),
  103.                                 $('<div class="dp-nav-next"></div>')
  104.                                     .append(
  105.                                         $('<a class="dp-nav-next-year" href="#" title="' + $.dpText.TEXT_NEXT_YEAR + '">&gt;&gt;</a>')
  106.                                             .bind(
  107.                                                 'click',
  108.                                                 function()
  109.                                                 {
  110.                                                     return c._displayNewMonth.call(c, this, 0, 1);
  111.                                                 }
  112.                                             ),
  113.                                         $('<a class="dp-nav-next-month" href="#" title="' + $.dpText.TEXT_NEXT_MONTH + '">&gt;</a>')
  114.                                             .bind(
  115.                                                 'click',
  116.                                                 function()
  117.                                                 {
  118.                                                     return c._displayNewMonth.call(c, this, 1, 0);
  119.                                                 }
  120.                                             )
  121.                                     ),
  122.                                 $('<div class="dp-calendar"></div>')
  123.                             )
  124.                             .bgIframe()
  125.                         );
  126.                    
  127.                 var $pop = this.inline ? $('.dp-popup', this.context) : $('#dp-popup');
  128.                
  129.                 if (this.showYearNavigation == false) {
  130.                     $('.dp-nav-prev-year, .dp-nav-next-year', c.context).css('display', 'none');
  131.                 }
  132.                 if (this.displayClose) {
  133.                     $pop.append(
  134.                         $('<a href="#" id="dp-close">' + $.dpText.TEXT_CLOSE + '</a>')
  135.                             .bind(
  136.                                 'click',
  137.                                 function()
  138.                                 {
  139.                                     c._closeCalendar();
  140.                                     return false;
  141.                                 }
  142.                             )
  143.                     );
  144.                 }
  145.                 c._renderCalendar();
  146.  
  147.                 $(this.ele).trigger('dpDisplayed', $pop);
  148.                
  149.                 if (!c.inline) {
  150.                     if (this.verticalPosition == $.dpConst.POS_BOTTOM) {
  151.                         $pop.css('top', eleOffset.top + $ele.height() - $pop.height() + c.verticalOffset);
  152.                     }
  153.                     if (this.horizontalPosition == $.dpConst.POS_RIGHT) {
  154.                         $pop.css('left', eleOffset.left + $ele.width() - $pop.width() + c.horizontalOffset);
  155.                     }
  156. //                  $('.selectee', this.context).focus();
  157.                     $(document).bind('mousedown.datepicker', this._checkMouse);
  158.                 }
  159.                
  160.             },
  161.             setRenderCallback : function(a)
  162.             {
  163.                 if (a == null) return;
  164.                 if (a && typeof(a) == 'function') {
  165.                     a = [a];
  166.                 }
  167.                 this.renderCallback = this.renderCallback.concat(a);
  168.             },
  169.             cellRender : function ($td, thisDate, month, year) {
  170.                 var c = this.dpController;
  171.                 var d = new Date(thisDate.getTime());
  172.                
  173.                 // add our click handlers to deal with it when the days are clicked...
  174.                
  175.                 $td.bind(
  176.                     'click',
  177.                     function()
  178.                     {
  179.                         var $this = $(this);
  180.                         if (!$this.is('.disabled')) {
  181.                             c.setSelected(d, !$this.is('.selected') || !c.selectMultiple, false, true);
  182.                             if (c.closeOnSelect) {
  183.                                 // Focus the next input in the form…
  184.                                 if (c.settings.autoFocusNextInput) {
  185.                                     var ele = c.ele;
  186.                                     var found = false;
  187.                                     $(':input', ele.form).each(
  188.                                         function()
  189.                                         {
  190.                                             if (found) {
  191.                                                 $(this).focus();
  192.                                                 return false;
  193.                                             }
  194.                                             if (this == ele) {
  195.                                                 found = true;
  196.                                             }
  197.                                         }
  198.                                     );
  199.                                 } else {
  200.                                     c.ele.focus();
  201.                                 }
  202.                                 c._closeCalendar();
  203.                             }
  204.                         }
  205.                     }
  206.                 );
  207.                 if (c.isSelected(d)) {
  208.                     $td.addClass('selected');
  209.                     if (c.settings.selectWeek)
  210.                     {
  211.                         $td.parent().addClass('selectedWeek');
  212.                     }
  213.                 } else  if (c.selectMultiple && c.numSelected == c.numSelectable) {
  214.                     $td.addClass('unselectable');
  215.                 }
  216.                
  217.             },
  218.             _applyRenderCallbacks : function()
  219.             {
  220.                 var c = this;
  221.                 $('td', this.context).each(
  222.                     function()
  223.                     {
  224.                         for (var i=0; i<c.renderCallback.length; i++) {
  225.                             $td = $(this);
  226.                             c.renderCallback[i].apply(this, [$td, Date.fromString($td.data('datePickerDate')), c.displayedMonth, c.displayedYear]);
  227.                         }
  228.                     }
  229.                 );
  230.                 return;
  231.             },
  232.             // ele is the clicked button - only proceed if it doesn't have the class disabled...
  233.             // m and y are -1, 0 or 1 depending which direction we want to go in...
  234.             _displayNewMonth : function(ele, m, y)
  235.             {
  236.                 if (!$(ele).is('.disabled')) {
  237.                     this.setDisplayedMonth(this.displayedMonth + m, this.displayedYear + y, true);
  238.                 }
  239.                 ele.blur();
  240.                 return false;
  241.             },
  242.             _rerenderCalendar : function()
  243.             {
  244.                 this._clearCalendar();
  245.                 this._renderCalendar();
  246.             },
  247.             _renderCalendar : function()
  248.             {
  249.                 // set the title...
  250.                 $('h2', this.context).html((new Date(this.displayedYear, this.displayedMonth, 1)).asString($.dpText.HEADER_FORMAT));
  251.                
  252.                 // render the calendar...
  253.                 $('.dp-calendar', this.context).renderCalendar(
  254.                     $.extend(
  255.                         {},
  256.                         this.settings,
  257.                         {
  258.                             month           : this.displayedMonth,
  259.                             year            : this.displayedYear,
  260.                             renderCallback  : this.cellRender,
  261.                             dpController    : this,
  262.                             hoverClass      : this.hoverClass
  263.                         })
  264.                 );
  265.                
  266.                 // update the status of the control buttons and disable dates before startDate or after endDate...
  267.                 // TODO: When should the year buttons be disabled? When you can't go forward a whole year from where you are or is that annoying?
  268.                 if (this.displayedYear == this.startDate.getFullYear() && this.displayedMonth == this.startDate.getMonth()) {
  269.                     $('.dp-nav-prev-year', this.context).addClass('disabled');
  270.                     $('.dp-nav-prev-month', this.context).addClass('disabled');
  271.                     $('.dp-calendar td.other-month', this.context).each(
  272.                         function()
  273.                         {
  274.                             var $this = $(this);
  275.                             if (Number($this.text()) > 20) {
  276.                                 $this.addClass('disabled');
  277.                             }
  278.                         }
  279.                     );
  280.                     var d = this.startDate.getDate();
  281.                     $('.dp-calendar td.current-month', this.context).each(
  282.                         function()
  283.                         {
  284.                             var $this = $(this);
  285.                             if (Number($this.text()) < d) {
  286.                                 $this.addClass('disabled');
  287.                             }
  288.                         }
  289.                     );
  290.                 } else {
  291.                     $('.dp-nav-prev-year', this.context).removeClass('disabled');
  292.                     $('.dp-nav-prev-month', this.context).removeClass('disabled');
  293.                     var d = this.startDate.getDate();
  294.                     if (d > 20) {
  295.                         // check if the startDate is last month as we might need to add some disabled classes...
  296.                         var st = this.startDate.getTime();
  297.                         var sd = new Date(st);
  298.                         sd.addMonths(1);
  299.                         if (this.displayedYear == sd.getFullYear() && this.displayedMonth == sd.getMonth()) {
  300.                             $('.dp-calendar td.other-month', this.context).each(
  301.                                 function()
  302.                                 {
  303.                                     var $this = $(this);
  304.                                     if (Date.fromString($this.data('datePickerDate')).getTime() < st) {
  305.                                         $this.addClass('disabled');
  306.                                     }
  307.                                 }
  308.                             );
  309.                         }
  310.                     }
  311.                 }
  #5 (permalink)  
Antiguo 26/01/2012, 16:13
 
Fecha de Ingreso: enero-2012
Mensajes: 64
Antigüedad: 12 años, 10 meses
Puntos: 0
Respuesta: calendario jquery

Código Javascript:
Ver original
  1. if (this.displayedYear == this.endDate.getFullYear() && this.displayedMonth == this.endDate.getMonth()) {
  2.                     $('.dp-nav-next-year', this.context).addClass('disabled');
  3.                     $('.dp-nav-next-month', this.context).addClass('disabled');
  4.                     $('.dp-calendar td.other-month', this.context).each(
  5.                         function()
  6.                         {
  7.                             var $this = $(this);
  8.                             if (Number($this.text()) < 14) {
  9.                                 $this.addClass('disabled');
  10.                             }
  11.                         }
  12.                     );
  13.                     var d = this.endDate.getDate();
  14.                     $('.dp-calendar td.current-month', this.context).each(
  15.                         function()
  16.                         {
  17.                             var $this = $(this);
  18.                             if (Number($this.text()) > d) {
  19.                                 $this.addClass('disabled');
  20.                             }
  21.                         }
  22.                     );
  23.                 } else {
  24.                     $('.dp-nav-next-year', this.context).removeClass('disabled');
  25.                     $('.dp-nav-next-month', this.context).removeClass('disabled');
  26.                     var d = this.endDate.getDate();
  27.                     if (d < 13) {
  28.                         // check if the endDate is next month as we might need to add some disabled classes...
  29.                         var ed = new Date(this.endDate.getTime());
  30.                         ed.addMonths(-1);
  31.                         if (this.displayedYear == ed.getFullYear() && this.displayedMonth == ed.getMonth()) {
  32.                             $('.dp-calendar td.other-month', this.context).each(
  33.                                 function()
  34.                                 {
  35.                                     var $this = $(this);
  36.                                     var cellDay = Number($this.text());
  37.                                     if (cellDay < 13 && cellDay > d) {
  38.                                         $this.addClass('disabled');
  39.                                     }
  40.                                 }
  41.                             );
  42.                         }
  43.                     }
  44.                 }
  45.                 this._applyRenderCallbacks();
  46.             },
  47.             _closeCalendar : function(programatic, ele)
  48.             {
  49.                 if (!ele || ele == this.ele)
  50.                 {
  51.                     $(document).unbind('mousedown.datepicker');
  52.                     $(document).unbind('keydown.datepicker');
  53.                     this._clearCalendar();
  54.                     $('#dp-popup a').unbind();
  55.                     $('#dp-popup').empty().remove();
  56.                     if (!programatic) {
  57.                         $(this.ele).trigger('dpClosed', [this.getSelected()]);
  58.                     }
  59.                 }
  60.             },
  61.             // empties the current dp-calendar div and makes sure that all events are unbound
  62.             // and expandos removed to avoid memory leaks...
  63.             _clearCalendar : function()
  64.             {
  65.                 // TODO.
  66.                 $('.dp-calendar td', this.context).unbind();
  67.                 $('.dp-calendar', this.context).empty();
  68.             }
  69.         }
  70.     );
  71.    
  72.     // static constants
  73.     $.dpConst = {
  74.         SHOW_HEADER_NONE    :   0,
  75.         SHOW_HEADER_SHORT   :   1,
  76.         SHOW_HEADER_LONG    :   2,
  77.         POS_TOP             :   0,
  78.         POS_BOTTOM          :   1,
  79.         POS_LEFT            :   0,
  80.         POS_RIGHT           :   1,
  81.         DP_INTERNAL_FOCUS   :   'dpInternalFocusTrigger'
  82.     };
  83.     // localisable text
  84.     $.dpText = {
  85.         TEXT_PREV_YEAR      :   'Previous year',
  86.         TEXT_PREV_MONTH     :   'Previous month',
  87.         TEXT_NEXT_YEAR      :   'Next year',
  88.         TEXT_NEXT_MONTH     :   'Next month',
  89.         TEXT_CLOSE          :   'Close',
  90.         TEXT_CHOOSE_DATE    :   'Choose date',
  91.         HEADER_FORMAT       :   'mmmm yyyy'
  92.     };
  93.     // version
  94.     $.dpVersion = '$Id: jquery.datePicker.js 108 2011-11-17 21:19:57Z [email protected] $';
  95.  
  96.     $.fn.datePicker.defaults = {
  97.         month               : undefined,
  98.         year                : undefined,
  99.         showHeader          : $.dpConst.SHOW_HEADER_SHORT,
  100.         startDate           : undefined,
  101.         endDate             : undefined,
  102.         inline              : false,
  103.         renderCallback      : null,
  104.         createButton        : true,
  105.         showYearNavigation  : true,
  106.         closeOnSelect       : true,
  107.         displayClose        : false,
  108.         selectMultiple      : false,
  109.         numSelectable       : Number.MAX_VALUE,
  110.         clickInput          : false,
  111.         rememberViewedMonth : true,
  112.         selectWeek          : false,
  113.         verticalPosition    : $.dpConst.POS_TOP,
  114.         horizontalPosition  : $.dpConst.POS_LEFT,
  115.         verticalOffset      : 0,
  116.         horizontalOffset    : 0,
  117.         hoverClass          : 'dp-hover',
  118.         autoFocusNextInput  : false
  119.     };
  120.  
  121.     function _getController(ele)
  122.     {
  123.         if (ele._dpId) return $.event._dpCache[ele._dpId];
  124.         return false;
  125.     };
  126.    
  127.     // make it so that no error is thrown if bgIframe plugin isn't included (allows you to use conditional
  128.     // comments to only include bgIframe where it is needed in IE without breaking this plugin).
  129.     if ($.fn.bgIframe == undefined) {
  130.         $.fn.bgIframe = function() {return this; };
  131.     };
  132.  
  133.  
  134.     // clean-up
  135.     $(window)
  136.         .bind('unload', function() {
  137.             var els = $.event._dpCache || [];
  138.             for (var i in els) {
  139.                 $(els[i].ele)._dpDestroy();
  140.             }
  141.         });
  142.        
  143.    
  144. })(jQuery);

Etiquetas: calendario, html, js
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 18:01.