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: 13 años, 1 mes
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: 13 años, 1 mes
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: 13 años, 1 mes
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: 13 años, 1 mes
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: 13 años, 1 mes
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 09:10.