3 replies · opened Sep 24, 2016
Hello,
I am using the inline calendar from this template page "component-datepicker.html"
The HTML looks like this
Inline Calendar
Is there any way that when a date is selected, that the date can appear in text in real-time? (maybe done through jQuery or JS)
So something like this?
25 September 2016
Inline Calendar
Hello,
This is Definitely Possible. Please consider adding the following JS Code at the bottom of the Page just after the js/functions.js JS File Linking:
jQuery('.travel-date-group .inline-calendar').on("changeDate", function() {
var fullDate = jQuery('.travel-date-group .inline-calendar').datepicker('getDate'),
myDate = new Date( fullDate ),
month = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"][myDate.getMonth()];
jQuery('#label-for-inline-datepicker').html( myDate.getDate() + ' ' + month + ' ' + myDate.getFullYear() );
});Also do make sure that you have added #label-for-inline-datepicker ID to the h2 Tag.
This will definitely work fine. Let us know if we can help you with anything else or if you find any further issues.
Thank you for the answer, works great!
When i click on the date, it shows the selected date, but when i click the same date again, it returns a NaN.
Is there any way to fix this?
Thank you in advance
Hello,
Thank You so much for reporting this Bug. This is Definitely Possible to fix. Simply replace the Old JS Code we provided you earlier with the following code:
jQuery('.travel-date-group .inline-calendar').on("changeDate", function() {
var fullDate = jQuery('.travel-date-group .inline-calendar').datepicker('getDate'),
myDate = fullDate ? new Date( fullDate ) : 0,
month = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"][myDate.getMonth()],
dateFormat = myDate.getDate() + ' ' + month + ' ' + myDate.getFullYear();
if( fullDate == 'Invalid Date' ) { dateFormat = ''; }
jQuery('#label-for-inline-datepicker').html( dateFormat );
});This will definitely work fine. Let us know if we can help you with anything else or if you find any further issues.
Have the same question, or something new?
Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.
Reply on the dashboard