Canvas Support

JS script to show selected date

3 replies·opened Sep 24, 2016
J
johnjohnSep 24, 2016

Hello,

I am using the inline calendar from this template page "component-datepicker.html"
The HTML looks like this

<div class="col-sm-6 bottommargin-sm">
	<label for="">Inline Calendar</label>
	<div class="inline-calendar"></div>
</div>

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?

<div class="col-sm-6 bottommargin-sm">
	<h2>25 September 2016</h2>
	<label for="">Inline Calendar</label>
	<div class="inline-calendar"></div>
</div>
S
SemiColonWebSTAFFSep 27, 2016

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.

J
johnjohnSep 28, 2016

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

S
SemiColonWebSTAFFSep 30, 2016

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