I am using phone gap date picker plugin for iOS, which was working fine, but can't select future date after iOS7 upgrade .
This is my js code,
// Handling for iOS and Android
$('.appointmentTime').on('click', function(e) {
var currentField = $(this);
window.plugins.datePicker.show((function() {
var o = {
date: new Date(),
mode: 'time', // date or time or blank for both
allowOldDates: true
};
if (myConfig.deviceType === myConfig.deviceTypeEnum.IOS) {
o.allowFutureDates = true;
}
return o;
})(), function(returnDate) {
var selectedDate;
selectedDate = new Date(returnDate);
currentField.blur();
});
}
Related
I need to mock the time for my CodeceptJS tests.
My React component uses the new Date() function:
const Component = () => {
console.log(new Date())
return <h1>Im a component</h1>
}
I need the component to think it's 2018. For my Jest unit tests this was straightforward:
import MockDate from 'mockdate';
MockDate.set('2018-10');
test("test something", ()=>{
// Actual test here
})
MockDate.reset();
How can I do the same with CodeceptJS? Ive tried using the date mocking module in the test:
Scenario('#test', async (CheckoutPage) => {
const MockDate = require('mockdate');
MockDate.set('2018-10');
// Actual test here
});
I also tried dependancy injection. The code within FIX-DATE monkey patches the date:
Scenario(
'#test',
(CheckoutPage, FixDate) => {
FixDate();
CheckoutPage.load();
pause();
}
).injectDependencies({ FixDate: require('./FIX-DATE') });
Neither of these have any affect on the date.
The issue is that CodeceptJS is running inside the browser, so you need to override date object of the browser.
Basically you need to override the Date Object of the browser, or the function that is used, for Example:
// create a date object for this Friday:
var d = new Date(2018, 0, 20);
//override Date constructor so all newly constructed dates return this Friday
Date = function(){return d;};
var now = new Date()
console.log(now);
Date.now = function () { return d};
console.log(Date.now());
This is the way to do that in pure JS, the second step is to integrate into codeceptjs, and this can be done using I.executeScript
for Example:
I.executeScript(function () {
var d = new Date(2018, 0, 20);
Date = function(){return d;};
})
You can also create a custom step, for example, I.fakeDate(new Date(2018, 0, 20))
module.exports = function() {
return actor({
fakeDate: function(date) {
I.executeScript(function (fakeDate) {
var d = fakeDate;
window.__original_date = Date;
Date = function(){return d;};
}, date);
},
fakeDateRestore: function() {
I.executeScript(function () {
Date = window.__original_date;
});
}
});
}
Then you just Fake the date when you need, and restore it.
I.Click('beofre');
I.fakeDate(new Date(2018,10,01));
// The test code here
I.fakeDateRestore();
Hope this helps #:-)
I have been trying to search for a solution to my Jquery ui datepicker problem and I'm having no luck. Here's what I'm trying to do...
I have an application where i'm doing some complex PHP to return a JSON array of dates that I want BLOCKED out of the Jquery UI Datepicker. I am returning this array:
["2013-03-14","2013-03-15","2013-03-16"]
Is there not a simple way to simply say: block these dates from the datepicker?
I've read the UI documentation and I see nothing that helps me. Anyone have any ideas?
You can use beforeShowDay to do this
The following example disables dates 14 March 2013 thru 16 March 2013
var array = ["2013-03-14","2013-03-15","2013-03-16"]
$('input').datepicker({
beforeShowDay: function(date){
var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
return [ array.indexOf(string) == -1 ]
}
});
Demo: Fiddle
IE 8 doesn't have indexOf function, so I used jQuery inArray instead.
$('input').datepicker({
beforeShowDay: function(date){
var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
return [$.inArray(string, array) == -1];
}
});
If you also want to block Sundays (or other days) as well as the array of dates, I use this code:
jQuery(function($){
var disabledDays = [
"27-4-2016", "25-12-2016", "26-12-2016",
"4-4-2017", "5-4-2017", "6-4-2017", "6-4-2016", "7-4-2017", "8-4-2017", "9-4-2017"
];
//replace these with the id's of your datepickers
$("#id-of-first-datepicker,#id-of-second-datepicker").datepicker({
beforeShowDay: function(date){
var day = date.getDay();
var string = jQuery.datepicker.formatDate('d-m-yy', date);
var isDisabled = ($.inArray(string, disabledDays) != -1);
//day != 0 disables all Sundays
return [day != 0 && !isDisabled];
}
});
});
$('input').datepicker({
beforeShowDay: function(date){
var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
return [ array.indexOf(string) == -1 ]
}
});
beforeShowDate didn't work for me, so I went ahead and developed my own solution:
$('#embeded_calendar').datepicker({
minDate: date,
localToday:datePlusOne,
changeDate: true,
changeMonth: true,
changeYear: true,
yearRange: "-120:+1",
onSelect: function(selectedDateFormatted){
var selectedDate = $("#embeded_calendar").datepicker('getDate');
deactivateDates(selectedDate);
}
});
var excludedDates = [ "10-20-2017","10-21-2016", "11-21-2016"];
deactivateDates(new Date());
function deactivateDates(selectedDate){
setTimeout(function(){
var thisMonthExcludedDates = thisMonthDates(selectedDate);
thisMonthExcludedDates = getDaysfromDate(thisMonthExcludedDates);
var excludedTDs = page.find('td[data-handler="selectDay"]').filter(function(){
return $.inArray( $(this).text(), thisMonthExcludedDates) >= 0
});
excludedTDs.unbind('click').addClass('ui-datepicker-unselectable');
}, 10);
}
function thisMonthDates(date){
return $.grep( excludedDates, function( n){
var dateParts = n.split("-");
return dateParts[0] == date.getMonth() + 1 && dateParts[2] == date.getYear() + 1900;
});
}
function getDaysfromDate(datesArray){
return $.map( datesArray, function( n){
return n.split("-")[1];
});
}
For DD-MM-YY use this code:
var array = ["03-03-2017', '03-10-2017', '03-25-2017"]
$('#datepicker').datepicker({
beforeShowDay: function(date){
var string = jQuery.datepicker.formatDate('dd-mm-yy', date);
return [ array.indexOf(string) == -1 ]
}
});
function highlightDays(date) {
for (var i = 0; i < dates.length; i++) {
if (new Date(dates[i]).toString() == date.toString()) {
return [true, 'highlight'];
}
}
return [true, ''];
}
If you want to disable particular date(s) in jquery datepicker then here is the simple demo for you.
<script type="text/javascript">
var arrDisabledDates = {};
arrDisabledDates[new Date("08/28/2017")] = new Date("08/28/2017");
arrDisabledDates[new Date("12/23/2017")] = new Date("12/23/2017");
$(".datepicker").datepicker({
dateFormat: "dd/mm/yy",
beforeShowDay: function (date) {
var day = date.getDay(),
bDisable = arrDisabledDates[date];
if (bDisable)
return [false, "", ""]
}
});
</script>
I have some code that is supposed to use the stelford calendar to add events to my ical on an iphone 3gs with ios 5.1.1 however when I test it out on the phone It doesn't add it to my calendar. If anyone could help that would be great!
//Calendar Dates
var sd = new Date();
sd.setYear(startYear);
sd.setMonth(startMonth);
sd.setDate(startDay);
sd.setHours(startHour);
sd.setMinutes(startMinute);
var ed = new Date();
ed.setYear(endYear);
ed.setMonth(endMonth);
ed.setDate(endDay);
ed.setHours(endHour);
ed.setMinutes(endMinute);
btn2.addEventListener('click',function(e){
var ticalendar = require("com.ti.calendar");
var ev = ticalendar.createItem({
title: meetName,
startDate: sd,
endDate: ed,
location: meetLoc
});
var p = ev.saveEvent();
Ti.API.info(p);
alert('Event Saved to Your Calendar!');
});
Thanks for any help.
Try This.
var sd = new Date();
var ed = new Date();
ed = ed.setMinutes(59);
btn2.addEventListener('click',function(e){
var ticalendar = require("com.ti.calendar");
var ev = ticalendar.createItem({
title: "meetName",
startDate: sd,
endDate: ed,
location: "meetLoc"
});
var p = ev.saveEvent();
Ti.API.info(p);
if(p.error!="none"){
alert("Error :- " + p.error );
}else{
alert("Add Successfully");
}
alert('Event Saved to Your Calendar!');
});
I think this is help for you Cheers:)
I'm using the datepicker form jQuery-ui-1.8.16.
I have the following code:
Site.Calendar = function() {
// Set default setting for all calendars
jQuery.datepicker.setDefaults({
showOn : 'both',
buttonImageOnly : true,
buttonText: '',
changeMonth : true,
changeYear : true,
showOtherMonths : true,
selectOtherMonths : true,
showButtonPanel : true,
dateFormat : "D, d M, yy",
showAnim : "slideDown",
onSelect: Site.Calendar.customiseTodayButton
});
};
Site.Calendar.customiseTodayButton = function(dateText, inst) {
console.log("hello");
};
My customiseTodayButton function is only getting triggered when I select an actual date and NOT on the Today button.
Is there any way to override how the today button work's in the jQuery datepicker?
Thanks
I found the following posted here:
Today button in jQuery Datepicker doesn't work
jQuery.datepicker._gotoToday = function(id) {
var target = jQuery(id);
var inst = this._getInst(target[0]);
if (this._get(inst, 'gotoCurrent') && inst.currentDay) {
inst.selectedDay = inst.currentDay;
inst.drawMonth = inst.selectedMonth = inst.currentMonth;
inst.drawYear = inst.selectedYear = inst.currentYear;
}
else {
var date = new Date();
inst.selectedDay = date.getDate();
inst.drawMonth = inst.selectedMonth = date.getMonth();
inst.drawYear = inst.selectedYear = date.getFullYear();
this._setDateDatepicker(target, date);
this._selectDate(id, this._getDateDatepicker(target));
}
this._notifyChange(inst);
this._adjustDate(target);
}
It simply rewrites the goToToday method and adds two new lines:
this._setDateDatepicker(target, date);
this._selectDate(id, this._getDateDatepicker(target));
Maybe there is a cleaner way to fix this with your original answer Mark?
There isn't a standard event for when the today button is clicked. However, taking a look at the jquery.ui.datepicker.js code, it appears that it calls $.datepicker._gotoToday. I'll assume by customizeTodayButton you're attempting to change the behavior of what it does currently (not the looks, the looks would be done with styling). To change the existing behavior, it's good to know what it does now. So, that in mind, this is the current code of the function used:
/* Action for current link. */
_gotoToday: function(id) {
var target = $(id);
var inst = this._getInst(target[0]);
if (this._get(inst, 'gotoCurrent') && inst.currentDay) {
inst.selectedDay = inst.currentDay;
inst.drawMonth = inst.selectedMonth = inst.currentMonth;
inst.drawYear = inst.selectedYear = inst.currentYear;
}
else {
var date = new Date();
inst.selectedDay = date.getDate();
inst.drawMonth = inst.selectedMonth = date.getMonth();
inst.drawYear = inst.selectedYear = date.getFullYear();
}
this._notifyChange(inst);
this._adjustDate(target);
},
To override this function with your own functionality, you'll want to do update your code to something like this:
Site.Calendar = function() {
//override the existing _goToToday functionality
$.datepicker._gotoTodayOriginal = $.datepicker._gotoToday;
$.datepicker._gotoToday = function(id) {
// now, call the original handler
$.datepicker._gotoTodayOriginal.apply(this, [id]);
// invoke selectDate to select the current date and close datepicker.
$.datepicker._selectDate.apply(this, [id]);
};
// Set default setting for all calendars
jQuery.datepicker.setDefaults({
showOn: 'both',
buttonImageOnly: true,
buttonText: '',
changeMonth: true,
changeYear: true,
showOtherMonths: true,
selectOtherMonths: true,
showButtonPanel: true,
dateFormat: "D, d M, yy",
showAnim: "slideDown"
});
};
Also, here's a working jsFiddle of what you're looking for.
I realized the overriding of the today button in this way:
jQuery.datepicker._gotoToday = function(id) {
var today = new Date();
var dateRef = jQuery("<td><a>" + today.getDate() + "</a></td>");
this._selectDay(id, today.getMonth(), today.getFullYear(), dateRef);
};
This is quite simple and does the "select date and close datepicker" functionality that I would.
so I have spent a day developing and reading (teh other way around) to enable my jQuery datepicker to select and highlight mutliple dates.
For this I have managed to write the selected dates to an array which is visualized in a simple textfield.
What I could not manage is to permanently modify the look of the selected date in the datepicker.
I have implemented the "beforeShowDay:" option, which is working properly uppon loading the datepicker, but of course is not called directly on selecting a date.
For this I guessed, I would need to refresh the view "onSelect", but the refresh is not working properly.
Right now, I have some small methods for handling the datearray.
Uppon adding or removing a date, I am trying to refresh the datepicker.
Uppon selecting a date, I am either adding it to, or remove it from the dates-array.
Also, onSelect, I am matching the selected day and try to addClass().
But once again, I think I missed something all the way round, as it is not shown in my datepicker.
Here's my code for now:
var dates = new Array();
function addDate(date) {
if (jQuery.inArray(date, dates) < 0 && date) {
dates.push(date);
}
}
function removeDate(index) {
dates.splice(index, 1);
}
// Adds a date if we don't have it yet, else remove it and update the dates
// textfield
function addOrRemoveDate(date) {
var index = jQuery.inArray(date, dates);
if (index >= 0) {
removeDate(index);
updateDatesField(dates);
} else {
addDate(date);
updateDatesField(dates);
}
jQuery(calContainer).datepicker("refresh");
}
var calContainer = document.getElementById("calendar-container");
jQuery(calContainer).datepicker({
minDate : new Date(),
dateFormat : "#",
onSelect : function(dateText, inst) {
addOrRemoveDate(dateText);
jQuery(".ui-datepicker-calendar tbody tr td a").each(function() {
if (jQuery(this).text() == inst.selectedDay) {
jQuery(this).addClass("ui-state-highlight");
jQuery(this).parent().addClass("selected");
}
});
// addTimeSelectorColumns(dates);
},
beforeShowDay : function(_date) {
var gotDate = -1;
for ( var index = 0; index < dates.length; index++) {
if (_date.getTime() == dates[index]) {
gotDate = 1;
} else {
gotDate = -1;
}
}
if (gotDate >= 0) {
return [ true, "ui-datepicker-today", "Event Name" ];
}
return [ true, "" ];
}
});
function updateDatesField(dates) {
if (dates.length > 0) {
var tmpDatesStrArr = new Array();
var dateString = "";
var datesField = document.getElementById("dates");
for ( var index = 0; index < dates.length; index++) {
var dateNum = dates[index];
var tmpDate = new Date();
tmpDate.setTime(dateNum);
dateString = tmpDate.getDate() + "." + tmpDate.getMonth() + "."
+ tmpDate.getFullYear();
tmpDatesStrArr.push(dateString);
}
jQuery(datesField).val(tmpDatesStrArr);
}
}
(I am still a beginner in Javascript/jQuery, so any help or hints towards my coding are welcome, btw...)
It depends whether you want to stick with jQuery UI or not. If you are open to other library, there is a jQuery Datepicker that supports multiple selection: jquery.datePicker with multiple select enabled. It may save you sometmie fiddling with jQuery UI's one, as it does not natively support multiple selection.
EDIT:
If your main library is not jQuery, I think you should look for a standalone or Prototype-dependent library instead. The JS Calendar looks promising. It natively supports multiple selection by detecting the Ctrl key.