https://www.ekaresur.cl/assets/date-selector-73bf1dab04d11bcbe39b9…aba5ec0e8c0e3308f45fc036726bde0ea992e615.js

1/*
2* Date Selector Plugin for jQuery
3* Author: Pablo Garín
4* 
5* Use:
6* var options = {
7*   format            : "d-m-Y",
8*   allowFutureDates  : false,
9*   months            : ["January","February","March","April","May","June","July","August","September","October","November","December"],
10*   placeholders      : {
11*     day   : "Day",
12*     month : "Month",
13*     year  : "Year"
14*   }
15* }
16* $("input.date").dateSelector(options);
17* 
18 */
19
20
21(function( $ ){
22
23  $.fn.dateSelector = function( options ){
24    var self  = this,
25      opts  = $.extend( {}, $.fn.dateSelector.defaults, options );
26
27    self.parents = [];
28    self.inputs  = [];
29    self.values  = [];
30
31    /* Methods */
32    self.validateDate = function(evt) {
33      var index     = $(self.parents).index( $(this).parents('.date-selector:first') ),
34          container = self.parents[index],
35          input     = self.inputs[index],
36          value     = self.values[index],
37          day     = $(container).find('.date-selector__day').val(),
38          month   = $(container).find('.date-selector__month').val(),
39          year    = $(container).find('.date-selector__year').val(),
40          code    = evt.keyCode || evt.which,
41          newChar = String.fromCharCode(code),
42          lastAvailable = (new Date(year,(parseInt(month)+1),0)).getDate();
43          dateToCheck   = new Date(year, month, day),
44          currentDate   = new Date();
45      
46      // reset date
47      $(input).val(value);
48      $(container).removeClass("has-error");
49
50      if( this.type == 'select-one' ){
51        // validations for select.
52      } else {
53        if( isNaN(newChar) ) {
54          var value = $( this ).val(),
55              index = value.toUpperCase().indexOf(newChar);
56          if( index >= 0 ){
57            $( this ).val( value.slice(0,index) + value.slice(index+1) );
58            return false;
59          }
60        }
61      }
62
63      if( day > 31 ){
64        $(container).find(".date-selector__day").val(31).focus();
65      }
66
67      if( day.length == 0 || month==null ){
68        return false;
69      }
70
71      if( typeof allowFutureDates === 'undefined' ) {
72        allowFutureDates = false;
73      }
74
75      if( lastAvailable < day ) {
76        $(container).find(".date-selector__day").val(lastAvailable).focus();
77        return false;
78      }
79
80      if( (!opts.allowFutureDates) && (dateToCheck > currentDate) ){
81        $(container).addClass("has-error");
82        return false;
83      }
84      input.val(self.dateFormat(day,month,year));
85      return true;
86    },
87    self.dateFormat = function(d,m,y) {
88      var format = $.fn.dateSelector.defaults.format,
89          days   = $.fn.dateSelector.defaults.days,
90          months = $.fn.dateSelector.defaults.months;
91      // fecha
92      var date = new Date(y,m,d), year = '', month = '', day = '', time = '';
93      var matches  = date.toISOString().match(/(\d{4})\-(\d{2})\-(\d{2})T(\d{2}):(\d{2}):(\d{2})/)
94        year  = matches[1];
95        month = matches[2];
96        day   = matches[3];
97        hour  = matches[4];
98        mins  = matches[5];
99        secs  = matches[6];
100        dateObj = {
101          "Y":year,
102          "y":year.slice(-2),
103          "m":month,
104          "M":months[date.getMonth()],
105          "d":day,
106          "D":days[date.getDay()],
107          "H":hour,
108          "i":mins,
109          "s":secs
110        }
111
112      // formato
113      formatArray  = format.match(/[YymMdDHis]/g);
114      formatedDate = format;
115      for( var el in formatArray ){
116      var element = formatArray[el];
117        if( typeof dateObj[element] !== 'undefined' ){
118          formatedDate = formatedDate.replace(element,dateObj[element]);
119        }
120      }
121      return formatedDate;
122    }
123
124    /* Main */
125    return this.each(function(index){
126      var _self          = $( this ),
127        dateContainer  = document.createElement("div"),
128        dayContainer   = document.createElement("div"),
129        monthContainer = document.createElement("div"),
130        yearContainer  = document.createElement("div"),
131        dayInput       = document.createElement("input"),
132        monthInput     = document.createElement("select"),
133        yearInput      = document.createElement("input"),
134        currentValue   = this.value,
135        dayValue       = "",
136        monthValue     = null,
137        yearValue      = "";
138      
139      /* Current Value */
140      if( currentValue.length > 0 ) {
141        currentValue = new Date(this.value+"T00:00:00");
142        dayValue     = currentValue.getDate();
143        monthValue   = currentValue.getMonth();
144        yearValue    = currentValue.getFullYear();
145      }
146      
147      /* Hidde Input */
148      _self.css('display', 'none');
149
150      /* Inputs */
151      dayContainer.className   = "date-selector__input";
152      monthContainer.className = "date-selector__input";
153      yearContainer.className  = "date-selector__input";
154      
155      /* Day */
156      dayInput.type        = "text";
157      dayInput.className   = "date-selector__day";
158      dayInput.maxLength   = "2";
159      dayInput.placeholder = opts.placeholders.day;
160      dayInput.value       = dayValue;
161      dayInput.onkeyup     = self.validateDate
162      dayContainer.appendChild(dayInput);
163      dateContainer.appendChild(dayContainer);
164
165      /* Month */
166      monthInput.className = "date-selector__month";
167      monthInput.onchange  = self.validateDate
168      var _option          = document.createElement('option');
169      _option.value        = "N";
170      _option.disabled     = "disabled";
171      _option.selected     = "selected";
172      _option.appendChild(document.createTextNode(opts.placeholders.month))
173      monthInput.appendChild(_option);
174      $.each(opts.months, function( value, text ){
175        var _option   = document.createElement('option');
176        _option.value = value;
177        if( value == monthValue ){
178          _option.selected = "selected";
179        }
180        _option.appendChild(document.createTextNode(text))
181        monthInput.appendChild(_option);
182      });
183      monthContainer.appendChild(monthInput);
184      dateContainer.appendChild(monthContainer);
185
186      /* Year */
187      yearInput.type        = "text";
188      yearInput.className   = "date-selector__year";

189      yearInput.maxLength   = "4";
190      yearInput.placeholder = opts.placeholders.year;
191      yearInput.value       = yearValue;
192      yearInput.onkeyup     = self.validateDate;
193      yearContainer.appendChild(yearInput);
194      dateContainer.appendChild(yearContainer);
195
196      /* Container */
197      dateContainer.className = "date-selector";
198      self.parents[index] = dateContainer;
199      self.inputs[index]  = _self;
200      self.values[index]  = _self.val();
201      $(dateContainer).insertAfter(_self);
202      return _self;
203    });
204  }
205
206  /* Defaults */
207  $.fn.dateSelector.defaults = {
208    format            : "Y-m-d",
209    allowFutureDates  : false,
210    days              : ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],
211    months            : ["January","February","March","April","May","June","July","August","September","October","November","December"],
212    placeholders      : {
213      day   : "Day",
214      month : "Month",
215      year  : "Year"
216    }
217  }
218}( jQuery ));