Page 1 of 2

Bootstrap-datetimepicker... change start date

Posted: Sun Aug 31, 2014 12:12 pm
by donny
hello,

i am using bootstrap-datetimepicker (http://eonasdan.github.io/bootstrap-datetimepicker/)
i have 3 date fields on my form. i want to be able to update the start date dynamically based on another calendars selected date.

for example
calendar 1 - user picks the date 3/15/2015
calendar 2 - updates its date to 3/15/2020 (+5 years)
calendar 3 - updates its date to 3/15/2025 (+10 years)

anybody know how i can do something like this using javascript?
there is a start date function in the calendar script it says it accepts js dates, strings and moment objects as values so I'm guessing there is a way to do this

any help would be great!

Re: Bootstrap-datetimepicker... change start date

Posted: Sun Aug 31, 2014 9:24 pm
by Celauran
Listen for a change event and when you've set one year through the date picker, adjust the other two using Date functions.

Something like this

Code: Select all

$('#datepicker').change(function() {
	var date = new Date($(this).val());
	$('#date2').val(date.setYear(date.getFullYear + 5));
	$('#date3').val(date.setYear(date.getFullYear + 5));
})

Re: Bootstrap-datetimepicker... change start date

Posted: Mon Sep 01, 2014 12:06 pm
by donny
thanks a lot i played around with it for a little while and couldn't figure it out. i somewhat understand PHP but know nothing about javascript yet. i am learning but still confused about a lot of things. this is my code can you show me how to make it work with these calendars please or explain in moron terms :roll:

http://jsfiddle.net/PKell/gpdctwxz/3/

thats my exact code. thanks so much for your help i really do appreciate it!!!!!!! i am young and i think I've found something i want to pursue as a career i like this stuff a lot

Re: Bootstrap-datetimepicker... change start date

Posted: Tue Sep 02, 2014 9:00 am
by Celauran

Re: Bootstrap-datetimepicker... change start date

Posted: Tue Sep 02, 2014 12:55 pm
by donny
YES exactly like that! lol amazing.. it works on jsfiddle but not on my site? it makes no sense. i am changing some IDs around but even if i use the original code it still doesn't work...
i have jquery and bootstrap called properly.
this is what it says in my console

[Error] Failed to load resource: The requested URL was not found on this server. (glyphicons-halflings-regular.woff, line 0)
[Error] Failed to load resource: The requested URL was not found on this server. (glyphicons-halflings-regular.ttf, line 0)
[Error] Failed to load resource: The requested URL was not found on this server. (glyphicons-halflings-regular.svg, line 0)
[Error] Failed to load resource: The requested URL was not found on this server. (jquery.min.map, line 0)
[Error] Failed to load resource: The requested URL was not found on this server. (jquery.min.map, line 0)

Re: Bootstrap-datetimepicker... change start date

Posted: Tue Sep 02, 2014 12:57 pm
by Celauran
Note that I moved some IDs from the wrapping div to the date inputs themselves so I could easily get their values.

Re: Bootstrap-datetimepicker... change start date

Posted: Tue Sep 02, 2014 12:59 pm
by Celauran
donny wrote:[Error] Failed to load resource: The requested URL was not found on this server. (glyphicons-halflings-regular.woff, line 0)
[Error] Failed to load resource: The requested URL was not found on this server. (glyphicons-halflings-regular.ttf, line 0)
[Error] Failed to load resource: The requested URL was not found on this server. (glyphicons-halflings-regular.svg, line 0)
[Error] Failed to load resource: The requested URL was not found on this server. (jquery.min.map, line 0)
[Error] Failed to load resource: The requested URL was not found on this server. (jquery.min.map, line 0)
Where are these being referenced? Have you checked the network tab? If they're being loaded from a CDN, it could be a temporary outage or something.

Re: Bootstrap-datetimepicker... change start date

Posted: Tue Sep 02, 2014 1:20 pm
by donny
its being done on my computer.. just regular mac.

Re: Bootstrap-datetimepicker... change start date

Posted: Tue Sep 02, 2014 7:26 pm
by donny
i figured out what the problem was. the script had to be loaded after the html calendars..

do you know how to make my start date for calendar 1 start at a week earlier than todays date?

Re: Bootstrap-datetimepicker... change start date

Posted: Tue Sep 02, 2014 8:55 pm
by Celauran

Re: Bootstrap-datetimepicker... change start date

Posted: Tue Sep 02, 2014 9:59 pm
by donny
lol your a genius. i wish i had your skills!!

i got a question though. the js doesn't work when i include it into my html using <script src=code.js></script>
it only works when i post the js script in between <script></script>

i have both at the end of my html after the </body> tag. it doesnt work if i put it in the <header> either.

Re: Bootstrap-datetimepicker... change start date

Posted: Wed Sep 03, 2014 5:49 am
by Celauran
And you have it wrapped inside a $(document).ready() ?

Re: Bootstrap-datetimepicker... change start date

Posted: Wed Sep 03, 2014 8:12 pm
by donny
i was including a js file and this was the code just like this

Code: Select all

		$(function () {
    	var date = new Date();
    	date.setFullYear(date.getFullYear()-1);
	    $('#date1').datetimepicker({
		        pickTime: false,
		        defaultDate: date
		    });
		})

        $(function () {
            $('#date2').datetimepicker({
                pickTime: false
            });
        });

        $(function () {
            $('#date3').datetimepicker({
                pickTime: false
            });
        });
        
        $('#date1').on('dp.change', function (e) {
            var date1 = new Date($('#date1').data("DateTimePicker").getDate()),
                date2 = new Date($('#date1').data("DateTimePicker").getDate());

            // date1
            date1.setFullYear(date1.getFullYear()+1);
            date1.setDate(date1.getDate()+2);

            // date2
            date2.setFullYear(date2.getFullYear()+2);

            $('#date2').data("DateTimePicker").setDate(date1);
            $('#date3').data("DateTimePicker").setDate(date2);
        });
i need it wrapped in something? if thats wrong can you show me what i need to add ?

Re: Bootstrap-datetimepicker... change start date

Posted: Thu Sep 04, 2014 7:43 pm
by donny
was something wrong?

Re: Bootstrap-datetimepicker... change start date

Posted: Sat Sep 06, 2014 5:38 pm
by donny
bump