1

/*

     2

* jQuery timepicker addon

     3

* By: Trent Richardson [http://trentrichardson.com]

     4

* Version 0.9.1

     5

* Last Modified: 12/2/2010

     6

* 

     7

* Copyright 2010 Trent Richardson

     8

* Dual licensed under the MIT and GPL licenses.

     9

* http://trentrichardson.com/Impromptu/GPL-LICENSE.txt

    10

* http://trentrichardson.com/Impromptu/MIT-LICENSE.txt

    11

* 

    12

* HERES THE CSS:

    13

* .ui-timepicker-div .ui-widget-header{ margin-bottom: 8px; }

    14

* .ui-timepicker-div dl{ text-align: left; }

    15

* .ui-timepicker-div dl dt{ height: 25px; }

    16

* .ui-timepicker-div dl dd{ margin: -25px 0 10px 65px; }

    17

* .ui-timepicker-div td { font-size: 90%; }

    18

*/

    19

    20

(function($) {

    21

    22

$.extend($.ui, { timepicker: { version: "0.9.1" } });

    23

    24

/* Time picker manager.

    25

   Use the singleton instance of this class, $.timepicker, to interact with the time picker.

    26

   Settings for (groups of) time pickers are maintained in an instance object,

    27

   allowing multiple different settings on the same page. */

    28

    29

function Timepicker() {

    30

	this.regional = []; // Available regional settings, indexed by language code

    31

	this.regional[''] = { // Default regional settings

    32

		currentText: 'Now',

    33

		closeText: 'Done',

    34

		ampm: false,

    35

		timeFormat: 'hh:mm tt',

    36

		timeOnlyTitle: 'Choose Time',

    37

		timeText: 'Time',

    38

		hourText: 'Hour',

    39

		minuteText: 'Minute',

    40

		secondText: 'Second'

    41

	};

    42

	this._defaults = { // Global defaults for all the datetime picker instances

    43

		showButtonPanel: true,

    44

		timeOnly: false,

    45

		showHour: true,

    46

		showMinute: true,

    47

		showSecond: false,

    48

		showTime: true,

    49

		stepHour: 0.05,

    50

		stepMinute: 0.05,

    51

		stepSecond: 0.05,

    52

		hour: 0,

    53

		minute: 0,

    54

		second: 0,

    55

		hourMin: 0,

    56

		minuteMin: 0,

    57

		secondMin: 0,

    58

		hourMax: 23,

    59

		minuteMax: 59,

    60

		secondMax: 59,

    61

		hourGrid: 0,

    62

		minuteGrid: 0,

    63

		secondGrid: 0,

    64

		alwaysSetTime: true

    65

	};

    66

	$.extend(this._defaults, this.regional['']);

    67

}

    68

    69

$.extend(Timepicker.prototype, {

    70

	$input: null,

    71

	$altInput: null,

    72

	$timeObj: null,

    73

	inst: null,

    74

	hour_slider: null,

    75

	minute_slider: null,

    76

	second_slider: null,

    77

	hour: 0,

    78

	minute: 0,

    79

	second: 0,

    80

	ampm: '',

    81

	formattedDate: '',

    82

	formattedTime: '',

    83

	formattedDateTime: '',

    84

    85

	/* Override the default settings for all instances of the time picker.

    86

	   @param  settings  object - the new settings to use as defaults (anonymous object)

    87

	   @return the manager object */

    88

	setDefaults: function(settings) {

    89

		extendRemove(this._defaults, settings || {});

    90

		return this;

    91

	},

    92

    93

	//########################################################################

    94

	// Create a new Timepicker instance

    95

	//########################################################################

    96

	_newInst: function($input, o) {

    97

		var tp_inst = new Timepicker(),

    98

			inlineSettings = {};

    99

   100

		for (var attrName in this._defaults) {

   101

			var attrValue = $input.attr('time:' + attrName);

   102

			if (attrValue) {

   103

				try {

   104

					inlineSettings[attrName] = eval(attrValue);

   105

				} catch (err) {

   106

					inlineSettings[attrName] = attrValue;

   107

				}

   108

			}

   109

		}

   110

		tp_inst._defaults = $.extend({}, this._defaults, inlineSettings, o, {

   111

			beforeShow: function(input, dp_inst) {

   112

				tp_inst.hour = tp_inst._defaults.hour;

   113

				tp_inst.minute = tp_inst._defaults.minute;

   114

				tp_inst.second = tp_inst._defaults.second;

   115

				tp_inst.ampm = '';

   116

				tp_inst.$input = $(input);

   117

				if (o.altField)

   118

					tp_inst.$altInput = $($.datepicker._get(dp_inst, 'altField'))

   119

						.css({ cursor: 'pointer' })

   120

						.focus(function(){

   121

							$input.trigger("focus");

   122

						});

   123

				tp_inst.inst = dp_inst;

   124

				tp_inst._addTimePicker();

   125

				if ($.isFunction(o.beforeShow))

   126

					o.beforeShow(input, dp_inst);

   127

			},

   128

			onChangeMonthYear: function(year, month, dp_inst) {

   129

				// Update the time as well : this prevents the time from disappearing from the $input field.

   130

				tp_inst._updateDateTime(dp_inst);

   131

				if ($.isFunction(o.onChangeMonthYear))

   132

					o.onChangeMonthYear(year, month, dp_inst);

   133

			},

   134

			onClose: function(dateText, dp_inst) {

   135

				if (tp_inst.timeDefined === true && $input.val() != '')

   136

					tp_inst._updateDateTime(dp_inst);

   137

				if ($.isFunction(o.onClose))

   138

					o.onClose(dateText, dp_inst);

   139

			},

   140

			timepicker: tp_inst // add timepicker as a property of datepicker: $.datepicker._get(dp_inst, 'timepicker');

   141

		});

   142

		return tp_inst;

   143

	},

   144

   145

	//########################################################################

   146

	// add our sliders to the calendar

   147

	//########################################################################

   148

	_addTimePicker: function() {

   149

		var currDT = (this.$altInput) ?

   150

				this.$input.val() + ' ' + this.$altInput.val() : 

   151

				this.$input.val(),

   152

				parsedDT = this._parseTime(currDT);

   153

   154

		this.timeDefined = (parsedDT) ? true : false;

   155

		this._injectTimePicker();

   156

	},

   157

   158

	//########################################################################

   159

	// parse the time string from input value or _setTime

   160

	//########################################################################

   161

	_parseTime: function(timeString, withDate) {

   162

		var regstr = this._defaults.timeFormat.toString()

   163

				.replace(/h{1,2}/ig, '(\\d?\\d)')

   164

				.replace(/m{1,2}/ig, '(\\d?\\d)')

   165

				.replace(/s{1,2}/ig, '(\\d?\\d)')

   166

				.replace(/t{1,2}/ig, '(am|pm|a|p)?')

   167

				.replace(/\s/g, '\\s?') + '$',

   168

   169

			treg = timeString.match(new RegExp(regstr, 'i')),

   170

			order = this._getFormatPositions();

   171

   172

		if (withDate || !this._defaults.timeOnly) {

   173

			// the time should come after x number of characters and a space.

   174

			// x = at least the length of text specified by the date format

   175

			var dp_dateFormat = $.datepicker._get(this.inst, 'dateFormat');

   176

			regstr = '.{' + dp_dateFormat.length + ',}\\s+' + regstr;

   177

		}

   178

   179

		if (treg) {

   180

			if (order.t !== -1)

   181

				this.ampm = ((treg[order.t] === undefined || treg[order.t].length === 0) ?

   182

					'' :

   183

					(treg[order.t].charAt(0).toUpperCase() == 'A') ? 'AM' : 'PM').toUpperCase();

   184

   185

			if (order.h !== -1) {

   186

				if (this.ampm == 'AM' && treg[order.h] == '12') 

   187

					this.hour = 0; // 12am = 0 hour

   188

				else if (this.ampm == 'PM' && treg[order.h] != '12') 

   189

					this.hour = (parseFloat(treg[order.h]) + 12).toFixed(0); // 12pm = 12 hour, any other pm = hour + 12

   190

				else this.hour = treg[order.h];

   191

			}

   192

   193

			if (order.m !== -1) this.minute = treg[order.m];

   194

			if (order.s !== -1) this.second = treg[order.s];

   195

		}

   196

	},

   197

   198

	//########################################################################

   199

	// figure out position of time elements.. cause js cant do named captures

   200

	//########################################################################

   201

	_getFormatPositions: function() {

   202

		var finds = this._defaults.timeFormat.toLowerCase().match(/(h{1,2}|m{1,2}|s{1,2}|t{1,2})/g),

   203

			orders = { h: -1, m: -1, s: -1, t: -1 };

   204

   205

		if (finds)

   206

			for (var i = 0; i < finds.length; i++)

   207

				if (orders[finds[i].toString().charAt(0)] == -1)

   208

					orders[finds[i].toString().charAt(0)] = i + 1;

   209

   210

		return orders;

   211

	},

   212

   213

	//########################################################################

   214

	// generate and inject html for timepicker into ui datepicker

   215

	//########################################################################

   216

	_injectTimePicker: function() {

   217

		var $dp = this.inst.dpDiv,

   218

			o = this._defaults,

   219

			tp_inst = this,

   220

			// Added by Peter Medeiros:

   221

			// - Figure out what the hour/minute/second max should be based on the step values.

   222

			// - Example: if stepMinute is 15, then minMax is 45.

   223

			hourMax = (o.hourMax - (o.hourMax % o.stepHour)).toFixed(0),

   224

			minMax  = (o.minuteMax - (o.minuteMax % o.stepMinute)).toFixed(0),

   225

			secMax  = (o.secondMax - (o.secondMax % o.stepSecond)).toFixed(0),

   226

			dp_id = this.inst.id.toString().replace(/([^A-Za-z0-9_])/g, '');

   227

   228

		// Prevent displaying twice

   229

		if ($dp.find("div#ui-timepicker-div-"+ dp_id).length === 0) {

   230

			var noDisplay = ' style="display:none;"',

   231

				html =	'<div class="ui-timepicker-div" id="ui-timepicker-div-' + dp_id + '"><dl>' +

   232

						'<dt class="ui_tpicker_time_label" id="ui_tpicker_time_label_' + dp_id + '"' +

   233

						((o.showTime) ? '' : noDisplay) + '>' + o.timeText + '</dt>' +

   234

						'<dd class="ui_tpicker_time" id="ui_tpicker_time_' + dp_id + '"' +

   235

						((o.showTime) ? '' : noDisplay) + '></dd>' +

   236

						'<dt class="ui_tpicker_hour_label" id="ui_tpicker_hour_label_' + dp_id + '"' +

   237

						((o.showHour) ? '' : noDisplay) + '>' + o.hourText + '</dt>',

   238

				hourGridSize = 0,

   239

				minuteGridSize = 0,

   240

				secondGridSize = 0,

   241

				size;

   242

   243

			if (o.showHour && o.hourGrid > 0) {

   244

				html += '<dd class="ui_tpicker_hour">' +

   245

						'<div id="ui_tpicker_hour_' + dp_id + '"' + ((o.showHour)   ? '' : noDisplay) + '></div>' +

   246

						'<div style="padding-left: 1px"><table><tr>';

   247

   248

				for (var h = o.hourMin; h < hourMax; h += o.hourGrid) {

   249

					hourGridSize++;

   250

					var tmph = (o.ampm && h > 12) ? h-12 : h;

   251

					if (tmph < 10) tmph = '0' + tmph;

   252

					if (o.ampm) {

   253

						if (h == 0) tmph = 12 +'a';

   254

						else if (h < 12) tmph += 'a';

   255

						else tmph += 'p';

   256

					}

   257

					html += '<td>' + tmph + '</td>';

   258

				}

   259

   260

				html += '</tr></table></div>' +

   261

						'</dd>';

   262

			} else html += '<dd class="ui_tpicker_hour" id="ui_tpicker_hour_' + dp_id + '"' +

   263

							((o.showHour) ? '' : noDisplay) + '></dd>';

   264

   265

			html += '<dt class="ui_tpicker_minute_label" id="ui_tpicker_minute_label_' + dp_id + '"' +

   266

					((o.showMinute) ? '' : noDisplay) + '>' + o.minuteText + '</dt>';

   267

   268

			if (o.showMinute && o.minuteGrid > 0) {

   269

				html += '<dd class="ui_tpicker_minute ui_tpicker_minute_' + o.minuteGrid + '">' +

   270

						'<div id="ui_tpicker_minute_' + dp_id + '"' +

   271

						((o.showMinute) ? '' : noDisplay) + '></div>' +

   272

						'<div style="padding-left: 1px"><table><tr>';

   273

   274

				for (var m = o.minuteMin; m < minMax; m += o.minuteGrid) {

   275

					minuteGridSize++;

   276

					html += '<td>' + ((m < 10) ? '0' : '') + m + '</td>';

   277

				}

   278

   279

				html += '</tr></table></div>' +

   280

						'</dd>';

   281

			} else html += '<dd class="ui_tpicker_minute" id="ui_tpicker_minute_' + dp_id + '"' +

   282

							((o.showMinute) ? '' : noDisplay) + '></dd>';

   283

   284

			html += '<dt class="ui_tpicker_second_label" id="ui_tpicker_second_label_' + dp_id + '"' +

   285

					((o.showSecond) ? '' : noDisplay) + '>' + o.secondText + '</dt>';

   286

   287

			if (o.showSecond && o.secondGrid > 0) {

   288

				html += '<dd class="ui_tpicker_second ui_tpicker_second_' + o.secondGrid + '">' +

   289

						'<div id="ui_tpicker_second_' + dp_id + '"' +

   290

						((o.showSecond) ? '' : noDisplay) + '></div>' +

   291

						'<div style="padding-left: 1px"><table><tr>';

   292

   293

				for (var s = o.secondMin; s < secMax; s += o.secondGrid) {

   294

					secondGridSize++;

   295

					html += '<td>' + ((s < 10) ? '0' : '') + s + '</td>';

   296

				}

   297

   298

				html += '</tr></table></div>' +

   299

						'</dd>';

   300

			} else html += '<dd class="ui_tpicker_second" id="ui_tpicker_second_' + dp_id + '"'	+

   301

							((o.showSecond) ? '' : noDisplay) + '></dd>';

   302

   303

			html += '</dl></div>';

   304

			$tp = $(html);

   305

   306

				// if we only want time picker...

   307

			if (o.timeOnly === true) {

   308

				$tp.prepend(

   309

					'<div class="ui-widget-header ui-helper-clearfix ui-corner-all">' +

   310

						'<div class="ui-datepicker-title">' + o.timeOnlyTitle + '</div>' +

   311

					'</div>');

   312

				$dp.find('.ui-datepicker-header, .ui-datepicker-calendar').hide();

   313

			}

   314

   315

			this.hour_slider = $tp.find('#ui_tpicker_hour_'+ dp_id).slider({

   316

				orientation: "horizontal",

   317

				value: this.hour,

   318

				min: o.hourMin,

   319

				max: hourMax,

   320

				step: o.stepHour,

   321

				slide: function(event, ui) {

   322

					tp_inst.hour_slider.slider( "option", "value", ui.value);

   323

					tp_inst._onTimeChange();

   324

				}

   325

			});

   326

   327

			// Updated by Peter Medeiros:

   328

			// - Pass in Event and UI instance into slide function

   329

			this.minute_slider = $tp.find('#ui_tpicker_minute_'+ dp_id).slider({

   330

				orientation: "horizontal",

   331

				value: this.minute,

   332

				min: o.minuteMin,

   333

				max: minMax,

   334

				step: o.stepMinute,

   335

				slide: function(event, ui) {

   336

					// update the global minute slider instance value with the current slider value

   337

					tp_inst.minute_slider.slider( "option", "value", ui.value);

   338

					tp_inst._onTimeChange();

   339

				}

   340

			});

   341

   342

			this.second_slider = $tp.find('#ui_tpicker_second_'+ dp_id).slider({

   343

				orientation: "horizontal",

   344

				value: this.second,

   345

				min: o.secondMin,

   346

				max: secMax,

   347

				step: o.stepSecond,

   348

				slide: function(event, ui) {

   349

					tp_inst.second_slider.slider( "option", "value", ui.value);

   350

					tp_inst._onTimeChange();

   351

				}

   352

			});

   353

   354

			// Add grid functionality

   355

			if (o.showHour && o.hourGrid > 0) {

   356

				size = 100 * hourGridSize * o.hourGrid / (hourMax - o.hourMin);

   357

   358

				$tp.find(".ui_tpicker_hour table").css({

   359

					width: size + "%",

   360

					marginLeft: (size / (-2 * hourGridSize)) + "%",

   361

					borderCollapse: 'collapse'

   362

				}).find("td").each( function(index) {

   363

					$(this).click(function() {

   364

						var h = $(this).html();

   365

						if(o.ampm)	{

   366

							var ap = h.substring(2).toLowerCase(),

   367

								aph = parseInt(h.substring(0,2));

   368

							if (ap == 'a') {

   369

								if (aph == 12) h = 0;

   370

								else h = aph;

   371

							} else if (aph == 12) h = 12;

   372

							else h = aph + 12;

   373

						}

   374

						tp_inst.hour_slider.slider("option", "value", h);

   375

						tp_inst._onTimeChange();

   376

					}).css({

   377

						cursor: 'pointer',

   378

						width: (100 / hourGridSize) + '%',

   379

						textAlign: 'center',

   380

						overflow: 'hidden'

   381

					});

   382

				});

   383

			}

   384

   385

			if (o.showMinute && o.minuteGrid > 0) {

   386

				size = 100 * minuteGridSize * o.minuteGrid / (minMax - o.minuteMin);

   387

				$tp.find(".ui_tpicker_minute table").css({

   388

					width: size + "%",

   389

					marginLeft: (size / (-2 * minuteGridSize)) + "%",

   390

					borderCollapse: 'collapse'

   391

				}).find("td").each(function(index) {

   392

					$(this).click(function() {

   393

						tp_inst.minute_slider.slider("option", "value", $(this).html());

   394

						tp_inst._onTimeChange();

   395

					}).css({

   396

						cursor: 'pointer',

   397

						width: (100 / minuteGridSize) + '%',

   398

						textAlign: 'center',

   399

						overflow: 'hidden'

   400

					});

   401

				});

   402

			}

   403

   404

			if (o.showSecond && o.secondGrid > 0) {

   405

				$tp.find(".ui_tpicker_second table").css({

   406

					width: size + "%",

   407

					marginLeft: (size / (-2 * secondGridSize)) + "%",

   408

					borderCollapse: 'collapse'

   409

				}).find("td").each(function(index) {

   410

					$(this).click(function() {

   411

						tp_inst.second_slider.slider("option", "value", $(this).html());

   412

						tp_inst._onTimeChange();

   413

					}).css({

   414

						cursor: 'pointer',

   415

						width: (100 / secondGridSize) + '%',

   416

						textAlign: 'center',

   417

						overflow: 'hidden'

   418

					});

   419

				});

   420

			}

   421

   422

			var $buttonPanel = $dp.find('.ui-datepicker-buttonpane');

   423

			if ($buttonPanel.length) $buttonPanel.before($tp);

   424

			else $dp.append($tp);

   425

   426

			this.$timeObj = $('#ui_tpicker_time_'+ dp_id);

   427

   428

			if (this.inst !== null) {

   429

				var timeDefined = this.timeDefined;

   430

				this._onTimeChange();

   431

				this.timeDefined = timeDefined;

   432

			}

   433

		}

   434

	},

   435

   436

	//########################################################################

   437

	// when a slider moves...

   438

	// on time change is also called when the time is updated in the text field

   439

	//########################################################################

   440

	_onTimeChange: function(force) {

   441

		var hour   = (this.hour_slider) ? this.hour_slider.slider('value') : this.hour,

   442

			minute = (this.minute_slider) ? this.minute_slider.slider('value') : this.minute,

   443

			second = (this.second_slider) ? this.second_slider.slider('value') : this.second,

   444

			ampm = (hour < 11.5) ? 'AM' : 'PM',

   445

			hasChanged = false;

   446

		hour = (hour >= 11.5 && hour < 12) ? 12 : hour;

   447

   448

		// If the update was done in the input field, this field should not be updated.

   449

		// If the update was done using the sliders, update the input field.

   450

		if (force || this.hour != hour || this.minute != minute || this.second != second || (this.ampm.length > 0 && this.ampm != ampm))

   451

			hasChanged = true;

   452

   453

		this.hour = parseFloat(hour).toFixed(0);

   454

		this.minute = parseFloat(minute).toFixed(0);

   455

		this.second = parseFloat(second).toFixed(0);

   456

		this.ampm = ampm;

   457

   458

		this._formatTime();

   459

		if (this.$timeObj) this.$timeObj.text(this.formattedTime);

   460

   461

		if (hasChanged) {

   462

			this._updateDateTime();

   463

			this.timeDefined = true;

   464

		}

   465

	},

   466

   467

	//########################################################################

   468

	// format the time all pretty...

   469

	//########################################################################

   470

	_formatTime: function(time, format, ampm) {

   471

		if (ampm == undefined) ampm = this._defaults.ampm;

   472

		time = time || { hour: this.hour, minute: this.minute, second: this.second, ampm: this.ampm };

   473

		var tmptime = format || this._defaults.timeFormat.toString();

   474

   475

		if (ampm) {

   476

			var hour12 = ((time.ampm == 'AM') ? (time.hour) : (time.hour % 12));

   477

			hour12 = (Number(hour12) === 0) ? 12 : hour12;

   478

			tmptime = tmptime.toString()

   479

				.replace(/hh/g, ((hour12 < 10) ? '0' : '') + hour12)

   480

				.replace(/h/g, hour12)

   481

				.replace(/mm/g, ((time.minute < 10) ? '0' : '') + time.minute)

   482

				.replace(/m/g, time.minute)

   483

				.replace(/ss/g, ((time.second < 10) ? '0' : '') + time.second)

   484

				.replace(/s/g, time.second)

   485

				.replace(/TT/g, time.ampm.toUpperCase())

   486

				.replace(/tt/g, time.ampm.toLowerCase())

   487

				.replace(/T/g, time.ampm.charAt(0).toUpperCase())

   488

				.replace(/t/g, time.ampm.charAt(0).toLowerCase());

   489

		} else {

   490

			tmptime = tmptime.toString()

   491

				.replace(/hh/g, ((time.hour < 10) ? '0' : '') + time.hour)

   492

				.replace(/h/g, time.hour)

   493

				.replace(/mm/g, ((time.minute < 10) ? '0' : '') + time.minute)

   494

				.replace(/m/g, time.minute)

   495

				.replace(/ss/g, ((time.second < 10) ? '0' : '') + time.second)

   496

				.replace(/s/g, time.second);

   497

			tmptime = $.trim(tmptime.replace(/t/gi, ''));

   498

		}

   499

   500

		if (arguments.length) return tmptime;

   501

		else this.formattedTime = tmptime;

   502

	},

   503

   504

	//########################################################################

   505

	// update our input with the new date time..

   506

	//########################################################################

   507

	_updateDateTime: function() {

   508

		var dp_inst = this.inst,

   509

			dt = new Date(dp_inst.selectedYear, dp_inst.selectedMonth, dp_inst.selectedDay),

   510

			dateFmt = $.datepicker._get(dp_inst, 'dateFormat'),

   511

			formatCfg = $.datepicker._getFormatConfig(dp_inst),

   512

			timeAvailable = dt !== null && this.timeDefined;

   513

		this.formattedDate = $.datepicker.formatDate(dateFmt, (dt === null ? new Date() : dt), formatCfg);

   514

		var formattedDateTime = this.formattedDate;

   515

   516

		if (dp_inst.lastVal !== undefined && (dp_inst.lastVal.length > 0 && this.$input.val().length === 0))

   517

			return;

   518

   519

		if (this._defaults.timeOnly === true) formattedDateTime = this.formattedTime;

   520

		else if (this._defaults.timeOnly !== true && (this._defaults.alwaysSetTime || timeAvailable)) {

   521

			if (this.$altInput)	this.$altInput.val(this.formattedTime);

   522

			else formattedDateTime += ' ' + this.formattedTime;

   523

		}

   524

   525

		this.formattedDateTime = formattedDateTime;

   526

		this.$input.val(formattedDateTime).trigger("change");

   527

	}

   528

   529

});

   530