I have the following code to move the day in the datepicker using an external button.
function moveDay(n) {
var date = new Date($.datepicker._curInst.selectedYear, $.datepicker._curInst.selectedMonth, $.datepicker._curInst.selectedDay);
date.setDate(date.getDate() + n);
$("#txtDateFilter").datepicker().datepicker("setDate", new Date(date));
}
My problem is that if I do not click on the date picker and select a day, the _curInst is null. So, I need to know how to avoid that.
Here is my Datepicker initialization (the defaultDatePickerSetting is just for translations):
$("#txtDateFilter").datepicker($.extend({
changeMonth: true,
dateFormat: "dd/mm/yy",
onSelect: function (dateText, inst) {
$("#hdnMes").val(inst.selectedMonth + 1);
$("#hdnAño").val(inst.selectedYear);
}
}, defaultDatePickerSetting));
$("#txtDateFilter").datepicker().datepicker("setDate", new Date());
I solved it changing this line:
var date = new Date($.datepicker._curInst.selectedYear, $.datepicker._curInst.selectedMonth, $.datepicker._curInst.selectedDay);
to this
var date = $("#txtDateFilter").datepicker("getDate");
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 #:-)
Datepicker using Jquery loses focus to the textbox after date selected. I am using jquery-ui-1.9.2.When a date is selected the focus not coming to the textbox.Any solution?
Try using the below code.
HTML code:
<input type="text" id="date"/>
JQuery:
$("#date").datepicker({
onClose: function () {
$(this).focus();
}
});
JSFiddle1
EDIT: The above code has a problem in IE, the datepicker is not getting closed. Here in this blog you can find the more information.
<script language='javascript' src="jquery-migrate-1.2.1.js"></script> // download and add this
$("#date").datepicker({
/* fix buggy IE focus functionality */
fixFocusIE: false,
onClose: function(dateText, inst) {
this.fixFocusIE = true;
this.focus();
},
beforeShow: function(input, inst) {
var result = $.browser.msie ? !this.fixFocusIE : true;
this.fixFocusIE = false;
return result;
}
});
JSFiddle2
$(".datepicker").datepicker({
onClose: function () {
$(this).parents().nextAll().find($(":input[type !='hidden']")).first().focus();
}
});
});
I have found an easier way that will put the focus on the next input, no matter how nested it is. You can always swap out the condition after the .find to whatever you like and it will bring the focus to that.
Initialise all the datepcikers on Doc Ready
$('.datepicker').datepicker(
{
onClose: function () {
this.focus();
}
});
Exapnding Praveen's answer.
I had one problem with it. On IE datepicker refused to show up each odd time I focused a field.
Also, there was a slight logical issue with that solution (which did not affect anything, but still not correct to my eye): fixFocusIE field is being set on options, but then later it is being called on "this", when "this" refers to DOM element and not options object. So essentially there are two fixFocusIE - one in options (unused) and the second one on DOM element itself.
And also $.browser.msie did not work anymore, I had to invent my own IE detector.
My working code looks like that:
var el = $("selector of element I need to assign to datepicker");
var options = {}; // actually I fill options from defaults and do some other manipulations, but I left it as empty object here for brevity
options.fixFocusIE = false;
function detectIE() {
var ua = window.navigator.userAgent;
if(ua.indexOf('MSIE ') > 0 ||
ua.indexOf('Trident/') > 0 ||
ua.indexOf('Edge/') > 0) {
return true;
}
// other browser
return false;
}
/* blur() and change() are needed to update Angular bindings, if any */
options.onSelect = function(dateText, inst) {
options.fixFocusIE = true;
$(this).blur().change().focus();
};
options.onClose = function(dateText, inst) {
options.fixFocusIE = true;
this.focus();
};
options.beforeShow = function(input, inst) {
var result = detectIE() ? !options.fixFocusIE : true;
options.fixFocusIE = false;
return result;
};
/* and this one will reset fixFocusIE to prevent datepicker from refusing to show when focusing the field for second time in IE */
el.blur(function(){
options.fixFocusIE = false;
});
el.datepicker(options);
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 been busy creating a solution to a client that has proven to be a bit more difficult than I thought it would be. I am using the jQuery Datepicker widget to display calendar events (monthly view) from server-side code. Every thing in the following code works EXCEPT the CSS. It is not changing anything and it seems I've tried everything in the world.
A Calendar is shown in month-view on page-load (MVC) and if a user has events the day should have a different background-color. Also, when the user changes month-to-month, the same logic happens (ajax call to server). Again, this all is working well. My directive to change the background color will not.
<script type="text/javascript">
$(document).ready(function () {
$.expr[":"].exactly = function (el, i, m) {
var s = m[3];
if (!s) return false;
return eval("/^" + s + "$/i").test($(el).text());
};
var currentYear = (new Date).getFullYear();
var currentMonth = (new Date).getMonth();
function getTheData(year, month) {
var theYear = year;
var theMonth = month;
//alert(theYear + ", " + theMonth);
$.post("GetMeSomeData", { year: theYear, month: theMonth }, function(data) {
//cycle through the dates and address the CSS appropriately
var i = 0;
for (i = 0; i < data.length; i++) {
$('.ui-datepicker-calendar td a:exactly(' + data[i]['d'] + ')')
.css({ backgroundColor: 'blue' });
}
});
}
$('#date').datepicker({
inline: true,
beforeShowDay: getTheData(currentYear, currentMonth),
onSelect: function (dateText, inst) {
Date.prototype.toString = function () { return isNaN(this) ? 'NaN' : [this.getDate(), this.getMonth(), this.getFullYear()].join('/'); };
d = new Date(dateText);
//alert(d.getDate() + ", " + d.getFullYear());
getTheData(d.getFullYear(), d.getDate());
},
onChangeMonthYear: function (year, month, inst) {
//alert(year + ", " + month);
getTheData(year, month);
}
});
});
</script>
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.