Bootstrap-datetimepicker... change start date

JavaScript and client side scripting.

Moderator: General Moderators

donny
Forum Contributor
Posts: 179
Joined: Mon Aug 11, 2014 11:18 am

Bootstrap-datetimepicker... change start date

Post 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!
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Bootstrap-datetimepicker... change start date

Post 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));
})
donny
Forum Contributor
Posts: 179
Joined: Mon Aug 11, 2014 11:18 am

Re: Bootstrap-datetimepicker... change start date

Post 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
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Bootstrap-datetimepicker... change start date

Post by Celauran »

donny
Forum Contributor
Posts: 179
Joined: Mon Aug 11, 2014 11:18 am

Re: Bootstrap-datetimepicker... change start date

Post 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)
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Bootstrap-datetimepicker... change start date

Post by Celauran »

Note that I moved some IDs from the wrapping div to the date inputs themselves so I could easily get their values.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Bootstrap-datetimepicker... change start date

Post 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.
donny
Forum Contributor
Posts: 179
Joined: Mon Aug 11, 2014 11:18 am

Re: Bootstrap-datetimepicker... change start date

Post by donny »

its being done on my computer.. just regular mac.
donny
Forum Contributor
Posts: 179
Joined: Mon Aug 11, 2014 11:18 am

Re: Bootstrap-datetimepicker... change start date

Post 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?
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Bootstrap-datetimepicker... change start date

Post by Celauran »

donny
Forum Contributor
Posts: 179
Joined: Mon Aug 11, 2014 11:18 am

Re: Bootstrap-datetimepicker... change start date

Post 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.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Bootstrap-datetimepicker... change start date

Post by Celauran »

And you have it wrapped inside a $(document).ready() ?
donny
Forum Contributor
Posts: 179
Joined: Mon Aug 11, 2014 11:18 am

Re: Bootstrap-datetimepicker... change start date

Post 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 ?
donny
Forum Contributor
Posts: 179
Joined: Mon Aug 11, 2014 11:18 am

Re: Bootstrap-datetimepicker... change start date

Post by donny »

was something wrong?
donny
Forum Contributor
Posts: 179
Joined: Mon Aug 11, 2014 11:18 am

Re: Bootstrap-datetimepicker... change start date

Post by donny »

bump
Post Reply