Testing pickadate with jest - javascript

On a Rails project, we've got a date picker using pickadate v3.6.2. Tests have been working for some time, but with a recent move away from moment.js to luxon.js some of the feature specs are failing. IRL, the functionality works fine. I think it's about how we're setting the date input. I'm trying to get the right function to drive capybara to set the date input.
The date input is in a form element which has been initialized with
$("#the_date_input").pickadate()
and a consuming script works (IRL) as follows:
const startDateField = this.element.find(this.opts.the_date_inputs_field);
const datePicker = startDateField.pickadate('picker');
if (datePicker) {
// this logs the correct value in the browser console
console.log(datePicker.get('select', 'yyyy-mm-dd'));
...
}
The date format in the browser looks like 12, October, 2020 - long presentable date format.
Our capybara code tries to set the value Rails default to_date string format, which I think is YYYY-MM-DD.
page.execute_script("$('#the_date_input').val('#{start_date.to_date}');")
Do I need to format val as the long english date string? or is there a better way with pickadate to just inject the value or set the value (with JS) in these tests.

Though a better solution would be to build some code to interact with the date picker (like a normal user - as #Thomas Walpole mentions above), programmatically interacting with the date picker modal is tricky.
I found a solution - maybe not ideal - but you can use the pickadate select method to specify a date. This runs through the pickdate code to properly set the input value and whatever else is happening under the hood.
This is my capybara helper method:
def set_pickadate_date(pickadate_selector, date)
page.execute_script("$('#{pickadate_selector}').pickadate('picker').set('select', [#{date.year}, #{date.month - 1}, #{date.day}]);")
end
I found this through the pickadate docs: https://amsul.ca/pickadate.js/api/#method-set-select

You could also have a look at <%= form.date_field :date_attribute %> - it will use a native date picker, supported by all major browsers.
See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date

Related

JQuery Datepicker Oracle APEX

I hope you are well.
I have an Oracle APEX form (v20) with a DatePicker field.
I only want to display a pop-up when the user clicks on Sunday.
My code :
var selector = $("#" + $(this.triggeringElement).parent().find('.apex-item-datepicker').attr('id'));
function showday() {
day_no = new Date($(this).val()).getDay();
if(day_no == 0) { //sundays
alert("its sunday");
}
}
selector.datepicker("option", {
onClose : showday
}).next(".ui-datepicker-trigger").addClass("a-Button a-Button--calendar");
I have a functional code which is the following but since the APEX datepicker it doesn't work like the demo below: http://jsfiddle.net/D4AGz/104/
it works in a way that I can't explain, more or less randomly, for example yesterday (before 00h) I had the following result : the pop-up is only displayed on the following Monday.
Thank you in advance for your help, I wish you a nice day.
It is possible to make the pop-up appear using a Dynamic Action. If you set a Dynamic Action Client-side Condition to read the date after the value was changed, you can verify if the date was Sunday.
In my screenshot below I hard coded the timezone to be UTC -4 since I am in the Eastern US timezone. You may need to adjust that if you so choose. I am also use the format mask YYYY-MM-DD for my date field so if the format mask of your date field is different, the javascript expression in the Client-side Condition may need to change.
I build this demo on apex.oracle.com that you can try out here.

Formatting the date based on client OS date format in Angular JS application

I have requirement in our application, where we need show the date format as per the client OS date format.I have used the following code to do this.
function getFormatedDateTime(date) {
var dateFormated = moment(date).toDate();
return dateFormated.toLocaleDateString();
};
this working in IE as expected , means when i changed the date format in my PC the date format in the entire application is changing.
But the problem is it not working in other browsers( Chrome, Fire Fox..etc).
we are using moment.js in our application, is there is any option in this to achieve my requirement.
Can any one help me to solve this.
Thanks in Advance
You can not get users system time format - JavaScript does not reveal information about the underlying OS, for security reasons.
Try this
function getFormatedDateTime(date) {
var dateFormated = new Date();
return dateFormated.toLocaleDateString();
};
This doesn't tell your code what the user's selected date format is, but it lets you return a date in whatever the user's format is.
Link for reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString
Change the system date format will reflect on browser restart.
You need use to moment with DateTime format like below
moment(date, 'MM/DD/YYYY')

Bootstrap datepicker setStartDate not working properly?

I am using Bootstrap datepicker and on selecting different values from a list its startdate is changing. It is working fine if I set the startdate 2013 from 2008 but it doesn't work if a select start date 2008 and currently its 2013.
What could be the reason here?
$('#datepicker').datepicker('setStartDate', updatedDate);
This line I am executing whenever I select different startDate.
Really need to know what updatedDate value is.
However, if you read the docs for the dtepicker the value passed in must be a string that is understandable by format
https://bootstrap-datepicker.readthedocs.io/en/latest/methods.html#setstartdate
https://bootstrap-datepicker.readthedocs.io/en/latest/options.html#startdate
Date or String. Default: Beginning of time
The earliest date that may be selected; all earlier dates will be
disabled.
Date should be in local timezone. String must be parsable with format.
So what you pass in as the format option must match the format of your start date. If you do not set the format optin, the default is "mm/dd/yyyy"
Without seeing code, I can only hypothesize; try calling [...].datepicker('update', 'date_string'); on the object to force an update on the control.

How do I format a Javascript date like 1950-12-30T18:25:43.511Z

I have an API where I the date need to be formatted like this
1950-12-30T18:25:43.511Z
This format looks somewhat unfamiliar to me, and I'm wondering how I can take a format like this
1950-12-30
and turn it into something like the former. FYI I'm using javascript (express)
You are trying to put the date into ISO format and the native Date object will do that for you, fairly simply, with the .toISOString() method:
var newDate = new Date("0977-03-28");
console.log(newDate.toISOString());
The result of that is: 0977-03-28T00:00:00.000Z (look familiar? :D )
One issue that you will have (if it is an issue), is that, because you only have the date value, and not a time value, the last part of the string will always be T00:00:00.000Z (which is the "time" section of the Date). You'll see that if you use today's date, using var newDate = new Date(); (which captures this instant), the time will be filled in: 2015-02-19T16:50:18.078Z (at the time of testing)
For more information, see here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString
(Note: in IE, this only works in v9 or later, though, that link also has a polyfill for older IE versions)

keith-wood date picker dateFormat and language

I'm using the Keith-Wood date picker and i´ve a problem with dateFormat.
When i use the following script everthing works fine:
$('#popupDatepicker').datepick({dateFormat: "yyyy-mm-dd"});
(when a select a date the result is, for example, 2012-09-06)
but when i include the language setting the dateFormat is ignored
$('#popupDatepicker').datepick($.extend({dateFormat: "yyyy-mm-dd"}, $.datepick.regional['pt-BR']));
In this case, when a select a date the result is, for example, 09/06/2012 (corresponding to the default dateFormat mm/dd/yyyy).
Anyone have a clue?
Thanks.
I found one solution (not sure if it's the best one) but...
$.datepick.setDefaults($.datepick.regional['pt-BR']);
$('#popupDatepicker').datepick({dateFormat: "yyyy-mm-dd",altFormat: "yyyy-mm-dd"});

Categories

Resources