PetersenDidIt did a great job answering this question.
He showed how to use a link to update the jQueryUI Datepicker's selected date by one day. His solution was:
$('a#next').click(function () {
var $picker = $("#datepicker");
var date=new Date($picker.datepicker('getDate'));
date.setDate(date.getDate()+1);
$picker.datepicker('setDate', date);
return false;
});
I am trying to modify it to do the same thing for a week or month. According to the set date api I should be able to use "+1m" and "+1w" to skip a month or week. I can't seem to get the code working with anything other than "+1".
Thoughts?
you can use the same code you have.
when you want one week do like this:
date.setDate(date.getDate()+7);
when you want one month you can do:
date.setMonth(date.getMonth()+1);
Try using FireBug script debugging. Might be some JS exception being generated.
Related
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.
Hi I am developing web application in angularjs. I am developing one form and i have one textbox with date picker. I am using 720kb date picket pluggin. https://github.com/720kb/angular-datepicker I want users to allow dates after 1 month. For example if today is august 14 then i want to enable dates only after september 14. I have added moment.js and put
var date = moment();
date.add(1, 'months');
console.log(date);
$scope.maxdate=date.d;
In html i have date-min-limit="maxdate". How ever this is not going to work. I got date-max-limit="" method from the above mentioned document. May i know what i am doing wring in the above code? Can someone help me to fix this? Thank you.
date-min-limit="" expects a string version of short date
In your controller
$scope.maxdate = moment().add(1, 'M').format('MM/DD/YYYY');
In your html
date-min-limit="maxdate"
If you use bootstrap, you can use this pluggin https://github.com/uxsolutions/bootstrap-datepicker
In its example，demos, you can set start date.
I am developing a site where i am using jQuery-UI datepicker, the problem is i have to select all dates and put it into an array when the user select a start date and end date using a aingle jquery UI datepicker.
i checked the jQuery-UI documentation but found nothing that solve my problem.
I want date-range to be picked up like this.
i have to use jQuery-UI, so any useful idea will be appreciated,
Thanks
you can use this method:
1.The user clicks the 2 dates
2.You save them as two variables(startDate,endDate)
3.you make a loop:
var numberOfDaysToAdd=0
var startDate;
var endDate;
var dateCheck=startDate;
var DatetoAddInArray = startDate;
var array = [];
while(DatetoAddInArray!=endDate){
//every time you check if the date is equal to the endDate
//if is not you add it in the array with the dates and then
//you increase the index.
//the while loop ends when you find the end Date
//You can change your code to add or not the start and the end dates
numberOfDaysToAdd++;
DatetoAddInArray.setDate(DatetoAddInArray.getDate()+numberOfDaysToAdd);
array[numberOfDaysToAdd-1]=DatetoAddInArray;
}
The above could be an easy way to store all the dates from the start to the end date.
(!) If the datepicker allows the user to click a startDate and then click a endDate that is before the startDate, you have to alert a message to the user to select a correct range.
Thanks.
I created datepicker like this, so no need for more answers. Thanks
Here is working Fiddle
Finding the date of a specific day of the current week with Moment.js
There are lots of ways to manipulate dates in javascript. I've been looking for the simplest, easiest way to do so without long, ugly code, so someone showed me Moment.js.
I want to use the current date to discover the date of a specific day of the current week with this library. My attempt so far involves taking the difference between the current day number(days 0-6) and checking how many days are between it and monday(day 1), which is not right at all.
Here's my fiddle.
Here's my code:
var now = moment();
var day = now.day();
var week = [['sunday',0],['monday',1],['tuesday',2],['wednesday',3],['thursday',4],['friday',5],['saturday',6]];
var monday = moment().day(-(week[1][1] - day));//today minus the difference between monday and today
$("#console").text(monday);
//I need to know the date of the current week's monday
//I need to know the date of the current week's friday
How can I do this? My method may be a terrible way to get this done, or it might be somewhat close. I do, however want the solution to be neat, small, dynamic, and simple, as all code should be.
I'd prefer not to use native JS date functionality which produces ugly, messy code in every situation that I've seen.
this week's sunday
moment().startOf('week')
this week's monday
moment().startOf('isoweek')
this week's saturday
moment().endOf('week')
difference between the current day to sunday
moment().diff(moment().startOf('week'),'days')
this week's wedesday
moment().startOf('week').add('days', 3)
Maybe a little late to the party, but here's the proper way to do this, as in the documentation.
moment().day(1); // Monday in the current week
Also if in your locale it happens that the week starts with Monday and you wish to get a locally aware result, you can use moment().weekday(0). Here's the documentation for the moment().weekday(dayNumber) method.
It's not longer possible to use just a string (e. g. 'isoweek'), we need to use it like this:
import * as moment from 'moment';
import { unitOfTime } from 'moment';
moment().startOf('isoweek' as unitOfTime.StartOf);
I have two jQuery datepickers that once changed, will trigger some ajax to grab all information between the two dates.
I want to run some code to check that the first date is smaller than the second, by converting to a date using this code:
function FormatUkDate(dateStr) {
dateStr = dateStr.split("/");
return new Date(dateStr[2], dateStr[1] - 1, dateStr[0]);
}
This works great, but the problem is even if I enter a date of '50/08/2011' it still validates and converts that to a Javascript date, I believe by adding the additional number of days to the start date.
Is there a way to properly validate this please?
Thanks!
you can validate using a jquery masked plugin,you can check it http://digitalbush.com/projects/masked-input-plugin/
For working with dates you can try to use datejs library. It has many features including validating dates. To solve your problem you can use Date.validateDay method. Also you can use datejs to compare dates.
hm... I guess a plugin would be a better solution, but for what it's worth:
function FormatUkDate(dateStr) {
dateStr = dateStr.split("/");
var newDate = new Date(dateStr[2], dateStr[1] - 1, dateStr[0]);
return newDate.getDate() == Number(dateStr[0]) && newDate.getMonth() == Number(dateStr[1]) - 1? newDate : null;
}
returns null if the date carries over to the next month.
Edit
New code :P