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.
Related
I've been trying to change the format of the dates that appear in the day column headers on the Fullcalendar week/timegrid view:
I'm using V5 in conjuction with moment.js.
Searching through the docs, I ended up here: https://fullcalendar.io/docs/v5/day-header-render-hooks
This is the code I've tried when initialising the calendar:
dayHeaderFormat: function(date){
return moment(date.weekday).format('ddd');
}
This results in showing today (Thu) for every header, rather than the correct days.
My next issue is that I'm not sure how to format the rest of the date accordingly - this targets the 'weekday' element of the date object, but I couldn't figure out how to format the whole date in one go (if that's possible). I'm looking to simply display 'Thu 14th', for example.
Any help or advice appreciated!
dayHeaderContent: (args) => {
return moment(args.date).format('ddd Do')
}
The new function supplies args instead of date object. So you access them with args.date and then format using moment
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 have created a jQuery date range picker. I am able to select the dates ranges and show them in a textbox. Now what I need is, I need to disable certain dates and assign different classes to those dates.
E.g. I must be able to give class A to April 2, class B to April 4 etc.
I have tried the results I got while I googled but nothing helped. What I am trying to do is to pass some dates and classes that should be assigned to those dates. That class should be assigned to those dates plus I must have option to enable or disable those dates.
The next thing I am trying to do is if there is a disabled date in between 2 dates, then that range cannot be selected.
E.g. Suppose I want to select April 2 to April 7 and April 5 is a disabled date.
Then I could be able to select either April 2 to April 4 or April 6 to April 7.
That means only one range should be selectable. Please help to solve this.
Please find the fiddle here:
You have to create two arrays, one that maps the css Class with each Date you want to be disabled class:date, and one that maps the css class with the date you want to give a special class, and then:
Inside beforeShowDay, check if the date is in the disabled dates array, and if you find it, use the associated class and return false, example: [false,"classA"], if not , check in the special array and return the class with true, else just do whatever you are doing right now.
Inside onSelect, check if the selected range includes any of the dates in the array and act accordingly
Then In the class:date array, you can add any class:date you desire to be disabled with its own class, and the code will handle it
Full working solution here.
Notes:
The code disables the 22nd of April and the 15th of May (try playing with the dates)
The code gives a special class to the 15th of April and the 10th of May.
The css class is applies as a background-color on the td, it does't show properly, you will have to modify the picker's css for it to do
Reference that hepled me provide this answer is here
You need to implement beforeShowDay and onSelect functions as shown in the following demo:
http://jsfiddle.net/salman/H3ra3/
The code may look daunting but it is not. The basics are as follows:
The dateConfig variable
The date information is stored in an associative array in which we store whether a date is selectable AND/OR its CSS class name.
beforeShowDay
Let date be the date for which the function was called
Let date1 be the date inside start date textbox
Let date2 be the date inside end date textbox
If the date is unselectable then
return [false, date_class or ""]
If user has chosen date1
If user has chosen date2 and date is between date1 ...date2 then
return [true, selected_class]
If date is less than date1 then
return [false, date_class or ""] (do not allow second date to be less than first date)
If date is equal to date1 then
return [true, selected_class] (allow second date to be same as first)
return [true, date_class or ""]
onSelect
Let date1 be the date inside start date textbox
Let date2 be the date inside end date textbox
If user has chosen date1 and date2 then
Iterate over all unselectable dates
If an unselectable date is between date1 ...date2 then throw an error
I'm using the Datepicker in two input fields to allow users to select a start and end date, respectively. I was curious if there's a setting for jQuery UI's datepicker to initialize the start date field to a period that is two complete months prior to the end date, which defaults to the current date. So when a user opens the page, the end date will be the current date and the start date will display the two complete months prior to the current date, e.g. end date is initialized to 4-3-2012, the start date would be 2-1-12.
I was going to write some custom formula to handle this, but wanted to be sure there wasn't already a setting for this built into the Datepicker.
$( ".selector" ).datepicker({"defaultDate": ((today.getMonth() +11)%12) + "/01/" + today.getFullYear()});
In order to "subtract 2" from the month, we add 11 and take the remainder because JS months are 0 based and we don't want to end up at -1 month.
edit: algorithm edited as per clarification
JsFiddle
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!