UIB Date Picker- Display previous day instead of present date (Plunker attached) - javascript

Plunker- http://plnkr.co/edit/RVKzD9kXNNxinShK7nLU?p=preview
I have a plunker which has the date displayed and a small icon where we can select any date we want and it will update it in the input field.
My problem is - i need to display the previous day when user opens the page. Currently here it displays presnt working day.
Also, while selecting previous day, i need not include weekends. i.e. saturday and sunday should be ignored. For e.g. today is 11th April. For previous date selection, i want 8th April to directly show up. 9th and 10th being saturday and sunday should be ignored.
Can someone please have a look.
Please ignore the below html code as it didnt allow me to post the question until i write some code. The plunker has the code which i am using.
<!doctype html>
</html>

You can do this by checking the date.getDay() and decrementing accordingly.
$scope.today = function () {
var lastWorking=new Date();
lastWorking.setDate(lastWorking.getDate()-1)
// 0 for Sunday and 6 for Saturday
while(lastWorking.getDay()==0 || lastWorking.getDay()==6){
lastWorking.setDate(lastWorking.getDate()-1);
}
$scope.tradeDate = lastWorking;
};
Updated Plunk

Related

Date Changing Interval

Not much coding experience, but hoping the community can help. I'd like to have a simple HTML headline read the following:
"Meals are available for pickup on Sunday,February 23 and Monday, February 24."
The crux is I need this to change every Thursday at 1 p.m. so that the dates change to the dates of the FOLLOWING Sunday & Monday.
--
We are a meal prep service with new menus every week. Order cut off is every Thursday # 1 p.m. I've automated the site's meal menu to rotate at this time. With this dynamic headline, I hope to avoid customer confusion so that if someone orders on Thursday # 2 p.m., they know their meals aren't going to be available until the following weekend.
Hope that makes sense. Thanks in advance for the help!
You can do this quite easily using the php time functions
Example:
<?php
$monday_date = strtotime('next monday');
$sunday_date = strtotime('next sunday');
?>
<!-- Some content -->
<div class="header">Meals are available for pickup on Sunday,February $sunday_date and Monday, February $monday_date</div>
<!-- Some more content -->
The above example wont rotate at 1pm but will show the date of the closest sunday/monday. I leave it as an exercise to the reader to work out how to adapt it for timings (hint: the time library can detect the current time)

jquery datepicker defaultdate will not automatically set to next available date when graphical calendar is persistent on a page

The jquery datepicker defaultdate will not automatically set to next available date when the graphical calendar is persistent on a page. the initial date the calendar selects can be a date that i have disabled. Many suggestions on workaround work when the calendar is a popup to an input field, but do not work when the calendar is persistently shown as a div. doesn't matter if the dates disabled are by noWeekends, by the day of week, or individually set days, the initial date value can be a disabled and unclickable date. I am using the alternate1 input field (which i normally hide) to pass data onto a PHP page. What i have almost works, but the next available date shows as highlighted when minDate happens to land on an available date, but when minDate lands on an unselectible date, the highlight is hidden. The temporary fix i used of setDate null - clears the initial selection value regardless of the highlight, so a visitor may think the a date is already selected when it is not. My PHP page reports back to the visitor that they have to go back and actually select a date. My use of datepicker is geared toward mobile, so popup or flyout calendar to make use of well known workarounds is unfavorable, the calendar GUI needs to be persistent on the page. To recreate my issue for yourself, on the jsfiddle, comment out the last javascript line, disallow a date mid-week in the var selections, and then set the minDate so that it will land on the disallowed date. you'll notice the alternate1 input gets prefilled with the disallowed date.
html code:
<div id="dp1"></div>
<input type="text" id="alternate1" name="alternate1"/> <!-- style="display:none;" this is the field that passes on to php -->
javascript code:
var selections = [
"2017-07-29",
"2017-07-30",
"2017-08-05",
"2017-08-06",
"2017-08-12",
"2017-08-13",
"2017-08-19",
"2017-08-20",
"2017-08-26",
"2017-08-27",
"2017-09-02",
"2017-09-03",
"2017-09-04",
"2017-09-09",
"2017-09-10",
"2017-09-16",
"2017-09-17",
"2017-09-23",
"2017-09-24",
"2017-09-30",
"2017-10-01",
"2017-10-07",
"2017-10-08",
"2017-10-09",
"2017-10-14",
]
function bansingle(date) {
var excerpt = jQuery.datepicker.formatDate('yy-mm-dd', date);
return [ selections.indexOf(excerpt) == -1 ]
}
// somehow combine this function later.
//function bandow(date) {
// var day = date.getDay();
// return [(day != 0 && day != 6)];
// }
$('#dp1').datepicker({
beforeShowDay: bansingle,
altField:'#alternate1',
altFormat: 'm-d-yy',
fielddateFormat: 'm-d-yy',
minDate: "+0d",
//maxDate: "+1m", // set latest selectable date
});
$('#dp1').datepicker("setDate", null); //clears alternate1 input field value
Here is the jsfiddle it does contain more dates and a little CSS. I recommend opening it in a new tab, to be able to return to this page after editing code.
the progress of my other question here has negated the need for an answer to this question. pursuing multiple changes to input, styling, and options - will workaround this question's problem.

Input type Month HTML with javascript

Please help me. and Let me know . I required:
I have one drop down in which the value are Monthly, Quarterly, Halfyearly, Yearly. this will be implemented according to financial year means April to next year march.
I want when I select Monthly all months are appended in input type. when i select quarter suppose if i select Q1, only April. May, June month are appended. if i select h1 halfyearly , first 6 month are append on input.
I am using html input type month in my app.
If There are some more option, please help me.
You can check this fiddle it may help.
var arr=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
function selectchange(){
var x = document.getElementById("sel").value;
alert(x);
if(x=="h1"){
for(i=0;i<6;i++){
document.getElementById("input").innerHTML+= arr[i]+",";
}
}
if(x=="m1"){
for(i=0;i<12;i++){
document.getElementById("input").innerHTML+= arr[i]+",";
}
}
if(x=="q1"){
for(i=3;i<6;i++){
document.getElementById("input").innerHTML+= arr[i]+",";
}
}
}
JSFiddle

Start and end days of the next month in Fullcalendar month view

I need to get the Start and the End dates of the next/ preview month view when click the next or preview buttons in the Full Calendar.
Ex : Say current viewing month is January and when I click next button I need to get start and end dates February calendar view or when click preview button it should return December.
$('#calendarId’).fullCalendar('getView').start will return current view start and end dates
but i need to returning the other month (next or preview) start and end dates.
Explain : I am in the month view and i can get the all the start and end dates and current dates etc by using the available options in the calendar. But I need is just assume I have to obtain the next month start date and end date before i go the next or preview view by clicking next/preview button.
It sounds like if you are in the month view all you need is the month and year you have navigated to. From the month and year you can determine the begin and end date of that month. http://arshaw.com/fullcalendar/docs/current_date/getDate/.
From doc:
$('#calendar').fullCalendar('getDate');
To enable caching:
$('#calendar').fullCalendar({
events: {
url: '/myfeed.php',
cache: true
}
});
Thanks all,
I used default caching and events(as a function) feature in the Full calendar. http://arshaw.com/fullcalendar/docs2/event_data/events_function/

How do I programmatically change the selected month in JQuery datepicker

I have a jQuery datepicker and I cannot figure out how to programmatically change the month back to the current month. After making a POST request to save the user's dates I need to return the calendar back to the current month. The calendar may be on a different month from the user playing around with different dates. I have tried setting the mindate again but that did not work.
This is not a popup calendar.
Setting the datepicker back to today
$('#myDatePicker').datepicker('setDate', new Date());
setting just the month back
var date = $('#myDatePicker').datepicker('getDate');
date.setMonth( (new Date()).getMonth() );
$('#myDatePicker').datepicker('setDate', date);
FIDDLE
You can also use .val() to set the date
$("#datepicker").val(date);

Categories

Resources