I'd like to have a dropdown (select) menu which has dates (e.g. June 21) as options. When the user selects a date from the dropdown, hours of operation will be displayed (somewhere) for that particular day. Currently the hours of operation are displayed for the present day only; this is accomplished through JavaScript date objects.
I'm wondering if it would be possible to take a selected dropdown menu option, convert it somehow into a proper date format, and then run it through the current function I have now, which takes as its argument only the current month and day.
More importantly, if anyone has any ideas about a better way to do something like this, even a link to some relevant information, I'd greatly appreciate it. Right now, I don't really know of any examples I could try to emulate.
You could generate the data on the server so that the options display the date as '21 June' or whatever and have the opening hours as the value. Or the value can be "21june" or similar with a related object that uses the value as a key and hours as the value:
var openingHours = {
'21June' : '08:00am - 05:30pm',
'22June' : '08:00am - 09:00pm',
...
}
and so on. Then just use the value of the selected option to get the opening hours. There are many other ways to approach this, it depends on how variable the hours are and how many dates you want to cover.
Most businesses just publish weekly hours and special notices for public holidays.
Do the hours of operation vary from week to week? Why not change the drop-down to days of the week (Monday, Tuesday, etc), modify the JS function to take an integer indicating day of the week, and then just modify each <option> element so that it has an onclick event binding, calling the JS function with the appropriate integer day number?
Example:
<select>
<option onclick="showHoursOfOperation(0);">Sunday</option>
<option onclick="showHoursOfOperation(1);">Monday</option>
<option onclick="showHoursOfOperation(2);">Tuesday</option>
[ ... ]
</select>
EDIT:
Perhaps a more graceful solution, stolen from #ibu. (untested, might not work)
<select onchange="showHoursOfOperation(this.selectedIndex);">
<option>Sunday</option>
<option>Monday</option>
[ ... ]
</select>
Related
I am currently working on a facility booking system. In the process of booking a facility, users can choose a time slot. When the user picks a date and facility to book, an ajax call is made to retrieve all available time slots. The data returned includes the time slots for weekdays and weekends (yes, they have different time slots).
Weekday and weekend and time slots are placed in a table. There is another function to check whether that the chosen date is a weekday or weekend. If it is the former, the weekend time slots will be hidden. If it is the latter, vice versa.
The opening time for weekdays: 08:00 - 21:00
The opening time for weekends: 08:30 - 17:30
To hide said time slots, the following code is used:
if (lastId != end_time_id) {
for (var i = lastId + 1; i <= end_time_id; i++) {
$('#trTimeslot' + i).hide();
}
}
If the code works perfectly, the time slots will be shown like this:
Chosen Date: 27 June 2017, Tuesday (Weekday)
Chosen Date: 1 July 2017, Saturday (Weekend)
However, at times, the code does NOT work. At times, the time slots shown will show BOTH weekdays and weekends:
Chosen Date: 27 June 2017, Tuesday (Weekday)
It must also be noted that 7 - 8 functions, filled with ajax requests, are called before the time slots are shown. The function to hide the "weekend" or "weekday" rows is the 5th function.
The question is, is there anything I can do to make sure the rows will be hidden before the time slots are shown to the user?
I do apologise that I cannot show more codes as the company is pretty sensitive on these kind of stuff.
Any help or suggestions would be greatly appreciated.
The code to hide is running before the code that populates the time table, add the loop to the callback after the data is inserted to the time table and displayed.
This may not be an absolute answer to the problem , I would rather suggest to do the opposite. From the problem description I assume there is an ajax call which return the data & following which the function triggers to hide the irrelevant rows. A minute delay will be there because of DOM traversal
Alternatively
Initially hide the view (weekends & timeslot).
Check for the condition and show only relevant data.
Till that time there can be a spinner in the screen to show work is in progress
I'm working on a scheduling system for music venues. The basic idea is that there's an "Create new schedule" page, on which there is a DatePicker calendar (using AngularUI Bootstrap). The user selects a Date, then adds performers into timeslots. The built object looks something like this:
{
date: 2017-6-22 00:00:00.000-5:00
venue: VenueID
performances: [
{
performer: performerID,
time: 2017-06-22 22:00:23.231-5:00
},{
perfomer: performer2ID,
time: 2017-06-22 23:00:42.523-5:00
}
]
}
There's a couple of problems here. For the original date selection, I set the time (using myDate.setHours(0,0,0,0)) to midnight because the time doesn't really matter, I only care about the actual date. Likewise for the timeslots, their date doesn't matter (since they belong to the schedule for that day), so I only care about the time. Then in another project, we have a node/mongo app that saves these schedules, and returns them to a page in the angular project that lets you select a schedule for editing/etc. It selects which ones to return by grabbing all the schedules for a specific venue, and doing "if (schedule.date >= new Date().setHours(0,0,0,0)) { add schedule to return list }"
Anyway, on to the actual problem. The angular app does all of the date calculations client side. What I mean is, I'm in CST. If I select a Date on the calendar and save a schedule for that date, then someone in EST selects the same day on the calendar and saves a schedule, they have different dates in the database. For example, when I make the schedule, the date in the DB is "2017-06-22 00:00:00.000-5:00". When the EST friend makes a schedule on the same date, it gets saved as "2017-06-22 00:00:00.000-4:00".
In the "Select a schedule to view/edit" page, I do something like this:
<select ng-model="schedule" ng-options="s.date|date:'fullDate' for s in schedules" ng-show="schedules.length>=1"></select>
Of course this doesn't work because when my EST friend looks at the list, he sees the correct date. But when I look at one that he created, the date is one day off because "2017-06-22 00:00:00.000-4:00" converted to local timezone is "2017-06-21 23:00:00.000-5:00".
I guess TL;DR is I'm not sure how to handle it since the venue and anyone creating/editing the schedules may not share the same time zone. I want all of the dates/times to show up in the timezone of the venue (which I have the address for. I guess I could geolocate to find timezone?). I'm just not sure how to go about it.
The DatePicker gives you a date object. Instead of storing the entire value string just grab the day month and year Date(value).getYear() + '-' + Date(value).getMonth() + '-' + Date(value).getDate(). As for the times do the same as the dates. Store those values in the DB and then when you get them back you will have to convert them back to a date object so that the date picker can understand them.
Ultimately with this solution your just trying to store dates without the timezones. Make sure to state in your app that the times are for those areas.
You have to distinguish between the format the date/time is transported, saved vs. how the date will be shown to the user.
For transportation and saving use UTC in a format that is easy computable (eg. ISO8601).
For visualization to the user convert this value to the timezone and desired user format by using some helper library.
I realize dates can be very tricky in JavaScript, however I am encountering a somewhat strange issue.
Hopefully someone will be able to shed some light on it!
I am taking a date input from webshim datepicker and doing the following
var date = $scope.date;
console.log('date', date);
date.setTime(date.getTime() + date.getTimezoneOffset()*60*1000);
console.log('after set time', date);
Which will log something along the lines of
date "2025-06-19T00:00:00.000Z"
after set time "2025-06-19T12:00:00.000Z"
Notice the hours are different but it's still the same day (the 19th)
However, if I switch to another view and return to this input and log the input again (different date then the one above) I get something like
date "2025-10-22T12:00:00.000Z"
after set time "2025-10-23T00:00:00.000Z"
Again the hours have changed as expected but this time the day is one day off (the 23rd vs the 22nd)
If I change view once more and return again, the logged output will return to being the same day.
Basically this behavior is being switched every time I switch views. Is this very unusual or a typical problem? By views I am referring to Angular partials e.g.
<script>
View 1
</script>
<script>
View 2
</script>
Any thoughts or advice would be really great.
Appreciate any help. Have searched many pages on this forum about Javascript datepicker dates. They all include two textbox calendars and not a compound bootstrap one.
I have a compound calendar (one input and a popup comes up displaying two boxes for from and to date and an apply button). When I search, it works, as long as the date I am searching for doesn't end on the date I am searching, for example, searching for 06/12/2015-06/18/2015 will not include results from the 18th June (06/18/2015). This is also the case if I enter the same date for start and end dates.
SUMMARY: need a way to set "start" and "end" so that I can add a day to the "end" day:
$('#picup-range').on('apply.daterangepicker', function(start, end) {
submitFilter();
});
function submitFilter() {
$('#filter').submit();
}
Ended up having to change Java database query that provided the data.
I have a row where users enter in various type of data in the date in there are different formats that I want to standardize. For example
12/21/2014 1900
This is one possible format I would like for the <td> to change it into DTG format which is
DD-HHMMZ-MMM-YY
Day, Hours in 24 format, Minutes, instead of p.m./a.m. I need Z for zulu, Month and year
How do I have this change once the user enters the data? I was looking at the onchange for javascript but I am not completely sure.
I'm assuming what you're asking is how to force the input to update after the user enters the date information. I'm assuming you know how you're going to format the date based on the given input.
This example shows you how to use jquery's .change() to update the input after something is entered. http://jsfiddle.net/Z5B25/
The basic code looks like:
$('.date').change(function(){
$(this).val('Computed/formatted Date');
});
Though this is not specific to your usage.