gd-sprest-js
Version:
SharePoint 2013/Online js components.
171 lines (170 loc) • 6.19 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var _1 = require(".");
/**
* Time Picker Type
*/
var TimePickerType;
(function (TimePickerType) {
TimePickerType[TimePickerType["Default"] = 0] = "Default";
TimePickerType[TimePickerType["Military"] = 1] = "Military";
})(TimePickerType = exports.TimePickerType || (exports.TimePickerType = {}));
/**
* Date Picker
*/
exports.DatePicker = function (props) {
// Method to get the date picker element
var getDate = function () {
// Returns the datetime element
return props.el.querySelector(".ms-DatePicker");
};
// Method to get the time picker element
var getTime = function () {
// Returns the datetime element
return props.el.querySelector(".ms-TimePicker");
};
// Method to get the fabric component
var getFabricComponent = function () {
// Return the date picker
return _dp;
};
// Method to get the value
var getValue = function () {
// Get the date value
var dt = _dp ? new Date(_dp.picker.get()) : null;
if (dt) {
// See if the time exists
var timeValue = _tp ? _tp.getValue() : null;
timeValue = timeValue && timeValue.value ? timeValue.value.split(" ") : null;
if (timeValue) {
var timeInfo = timeValue[0].split(":");
// Set the hours
var hours = parseInt(timeInfo[0]);
hours += hours < 12 && timeValue[1] == "PM" ? 12 : 0;
dt.setHours(hours);
// Set the minutes
dt.setMinutes(parseInt(timeInfo[1]));
}
}
// Return the date
return dt;
};
// Method to render the date picker
var renderDatePicker = function (el) {
// Add the datetime html
el.innerHTML = _1.Templates.DatePicker(props);
// Set the date picker change event
el.onchange = function () {
// Execute the change event
props.onChange ? props.onChange(getValue()) : null;
};
// Create the date picker
var dp = new _1.fabric.DatePicker(el);
// See if a value exists
if (props.value) {
var dt = new Date(props.value);
// Set the date
dp.picker.set("select", [dt.getFullYear(), dt.getMonth(), dt.getDate()]);
}
// Return the date picker
return dp;
};
// Method to render the time picker
var renderTimePicker = function (el) {
// Render the options
var options = [];
// Create the hours
for (var i = 0; i < 24; i++) {
var hour = "";
// See if this is military time
if (props.timePickerType == TimePickerType.Military) {
// Set the hour
hour = ("0" + i).slice(-2);
}
else {
// Set the hour
hour = i % 12 == 0 ? "12" : ("0" + (i % 12)).slice(-2);
}
// Create the minutes
for (var j = 0; j < 4; j++) {
var min = ("0" + (j * 15)).slice(-2);
// See if this is not military time
if (props.timePickerType != TimePickerType.Military) {
min += " " + (i < 12 ? "AM" : "PM");
}
// Add the option
options.push({
text: hour + ":" + min,
value: hour + ":" + min
});
}
}
// See if a value exists
var value = null;
if (props.value) {
var dt = new Date(props.value);
// Extract the time information
var timeInfo = dt.toLocaleTimeString().replace(/[^A-Z0-9: ]/g, "").split(' ');
var time = timeInfo[0].split(':');
var format = timeInfo[1];
// Set the hours, minutes and format
var hours = parseInt(time[0]);
var mins = ("0" + parseInt(time[1])).slice(-2);
// Update the hours based on the time picker type
hours += hours < 12 && format == "PM" && props.timePickerType == TimePickerType.Military ? 12 : 0;
hours = ("0" + hours).slice(-2);
// Set the time value
value = hours + ":" + mins + " " + format;
}
// Render a dropdown
return _1.Dropdown({
el: el,
label: "Time",
options: options,
value: value
});
};
// Add the date picker
props.el.innerHTML = [
'<div class="ms-DatePicker"></div>',
props.showTime ? '<div class="ms-TimePicker"></div>' : ''
].join('\n');
// Render the date picker
var _dp = renderDatePicker(props.el.children[0]);
// Render the time picker
var _tp = props.showTime ? renderTimePicker(props.el.children[1]) : null;
// Add a click event to the date picker input
_dp.picker.on({
"open": function () {
// Get the date picker
var dp = _dp.picker.$root[0].children[0];
// Wait for the date picker to be visible
var ctr = 0;
var id = setInterval(function () {
var pos = dp.getBoundingClientRect();
if (pos.top > 0) {
// Clear the interval
clearInterval(id);
// See if the date picker is visible
var offset = document.body.clientHeight - (pos.top + pos.height);
if (offset < 0) {
// Ensure the date picker is visible
dp.scrollIntoView(false);
}
}
// See if we have exceeded the max attempts
else if (++ctr > 5) {
// Clear the interval
clearInterval(id);
}
}, 100);
}
});
// Return the date picker
return {
getDate: getDate,
getTime: getTime,
getFabricComponent: getFabricComponent,
getValue: getValue
};
};