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.
Related
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
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')
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.
I have deployed an action lis with a kind of dashboard. Through this, I would like to highlight the overdue action by adding the status on a dedicated column via javascript. My full script works well except the line where I want to get the Due Date.
For trying to identify the issue, I have simply copied the Due Date in an other column (check column), and the result is surprising!!!
Examples:
Due Date as displawed in the pop-up > Check column interpreted by the JS code
-30/07/2016>27/07/2016 22:00:00
-16/08/2016>17/08/2016 22:00:00
-01/08/2016>03:08:2016 22:00:00
Find hereafter an extract of the code:
var Status = oListItem.get_item('Status');
duedate = oListItem.get_item('DueDate');
oListItem.set_item('Check', oListItem.get_item('DueDate'));
It seems that the issue is related to the orignial Due Date column, qnd linked to a wrong conversion.
Does someone have an idea how to correct this issue?
I have found a solution or work around:
Create a calculated field which recreate the date from the Due Date field
In the JS, get the string from the calculated field, and then split it, et recreate the date with the JS code
Have fun!
I want to use the jQuery masked input plugin found here http://digitalbush.com/projects/masked-input-plugin/ to format the date.
I am pulling data from a database to populate the date field when the page loads. The user will then be able to change the date if it is incorrect.
I want people to be able to enter just one number for the month and day instead of having to enter a 0 before a single-digit number. I want them to be able to type 6/13/2010 instead of 06/13/2010. The data from the database might not have 0's in front, though.
I know that anything listed after a ? is optional, but I want characters at the beginning or middle to be optional.
Thanks!
I had a similar requirement recently, and the only thing I could find that didn't require me to do a lot of work on tweaking the plugin was to use this modified date masking plugin that is based on the one you mentioned. It seems to be doing the job so far.
If you want to test it out, head to this page.
The basic implementation we've used with this modified date masker is as follows:
$('#yourInputBoxHere').mask("99/99/9999", {placeholder: 'MM/DD/YYYY' });
I haven't tried it with single digits for dates, but if I were to do it, I'd just change the above expression to this:
$('#yourInputBoxHere').mask("9/9/9999", {placeholder: 'M/D/YYYY' });
I hope this helps.
The short answer is:
It's not possible without tweaking the plugin.
But, your users will thank you a lot if you use the jquery ui datepicker.
It's usage is as simple as:
$("#texbox1").datepicker();
It will show a nice calendar when the inputbox recieves focus.
Hope this helps. Cheers
I am not sure if this addresses your problem but I found this on https://github.com/RobinHerbots/jquery.inputmask:
$('#yourInputBoxHere').datepicker().inputmask("date", { placeholder: "mm/dd/yyyy", yearrange: { minyear: 1700 } });
This will fill in a '0' at the month beginning if you start with a number greater than '1' and for the day if the number is greater than 3, '0' is automatically placed in front.
The yearrange can also specify maxyear, if you need that criteria.
You can leave out the .datepicker() if you don't want the jquery calendar.
Hope this helps!