Normally when selecting dates from immediate vicinity of 'today', default behaviour (picking a day of month) works well but when picking birthdays I want the user to start picking the date from years. I looked at the docs but couldn't find any option to do this. I want the datepicker to open with years selection first. As shown in this picture:
I'm using this plugin: https://bootstrapdatepicker.readthedocs.io/en/latest/
Use startView option (0-days, 1-months, 2-years, see plugin docs):
$('#date').datepicker({
startView:2//
});
Related
I'm trying to get a full year calendar from jQuery UI datepicker, where I can interact with weeks rather than days.
I already found how to do the weekly part, but now I would like to display the full year, for a result similar to this :
I managed to add the 12 months, using the numberOfMonths: 12, but how can I set them display as a grid? I tried to set a width to the container, but it doesn't do anything.
For the starting month, I find on an other topic that I can change default date to 1st January adding defaultDate: new Date(new Date().getFullYear(), 0,1). This indeed make the months starting on January, but it also move the current day selection to 1st January... I would prefer, if someone knew a way to keep the current day as default selection.
Then for the previous/next button, is it possible to make them changing year in stead of month ? Else I think I may cheat, by adding an event handler to click 12 times instead of 1.
Finally, I would like to move the next button back to the third month like in the picture. It may not be very hard using CSS, so I'm just curious if there might be a function to do it more easily.
Here's a JSFiddle for my current code http://jsfiddle.net/AVZJh/2553/
I finally found all the missing part, result : http://jsfiddle.net/AVZJh/2625/
Grid & mooving previous/next button was both done changing numberOfMonths to an array : numberOfMonths: [4,3]
Previous/next switching year in stead of month was done adding stepMonths:12
Starting at january without changing default date was done adding showCurrentAtPos: new Date().getMonth()
Why don't you try AnyTime. It has all the features you ask for.
In my viewDisplay method i have a goToDate method that actually when you click on a day, week or month the calender view go to this specific clicked day with what ever you choose from day. week or month
viewDisplay: function (view) {
var current_clicked_day = $(window).data('cell_date') || new Date();
$('#calendar').fullCalendar('gotoDate', current_clicked_day);
},
and This is working fine, However it breaks all events related to prev, next and today
<>Today
i'm not sure if this is something in my code or a bug in the library
Working Example
For Example
if you click on a day -on the calendar - and then click on Day in the upper right corner and then Today that wouldn't work, plus i don't get any errors in the console
From what I am understanding, you would like to display the agendaDay view when you click on a day in the month or weekAgenda views (http://arshaw.com/fullcalendar/docs/views/Available_Views/)
First of all, viewDisplay has been deprecated (http://arshaw.com/fullcalendar/docs/removed/viewDisplay/) a couple of builds ago. I suggest you update your library.
To achieve what you want you need to call dayClick (http://arshaw.com/fullcalendar/docs/mouse/dayClick/)
Here is a working fiddle based on yours.
I have commented viewDisplay and added the dayClick part just after. http://jsfiddle.net/4bg2B/3/
I'm working on a Wordpress website with the theme based on Bootstrap 3.
In a form I need to include calendar date pickers. I added a js library from eyecon (Demo Website for Datepicker Library). I made it work with date selectors, but I'm having trouble disabling choosing the past times for arrival field, when the departure time is set.
For example, if the Departure time is set to be 1 March, when the user clicks on the Arrival field in the calendar that pops up, all the dates before 2nd March should be disabled.
I tried multiple versions of code given on demo website, but they didn't work. I think the problem might be that I have jQuery in noConflict mode.
My current script is located in footer.php of my theme. The calendar pop up works, and it disables past dates, but it doesn't disable dates before the Arrival field once the Departure date is set.
This was the most successful attempt, as at least the calendar popups were working on this attempt: http://jsfiddle.net/j5ZKc/
And this is my current script:
<script type="text/javascript">
jQuery(function() {
jQuery('#dp1, #dp2'
).datepicker({startDate: '-0m'}).on('changeDate', function(){
jQuery( '#dp1, #dp2'
).datepicker('hide');
})
});
</script>
Any suggestions please?
So after some trouble I finally got something working for you:
jsFiddle Bootstrap-datepicker
What did I do:
I used forked Bootstrap-datepicker. It is in my opinion way better documented and easier to use. I got it working so that should count for something.
For example I got the date of the respective datepicker by invoking getDate() on a datepicker:
checkout.datepicker("getDate").valueOf()
If you have any questions about my code, let me know!
EDIT:
I updated the former jsFiddle (see the link above). It automatically sets the value of #dp2 to the selected date of #dp1 + one day. Therefore you should always be in the correct month.
If you don't want the code to put the focus on #dp2 after a date is selected just remove the following line in the jsFiddle:
$('#dp2')[0].focus();
Try this code snippet:
$('#changestartdate').datetimepicker({
minDate:new Date()
});
I have a problem. I should work with the RichFaces calendar component so I can select each day, which are visible for a current selected month, but that is not possible.
An example:
I selected the month march and now I can see some days of the month February and some day of the month April. And this days i want selected.
I found in the RichFaces Documentation that boundaryDatesMode attribute can be controlled but my solution isn't successful. I tried setting this attribute with value "active" or "inactive" but nothing happens.
Can somebody help me to solve my problem?
//EDIT
I work with JSF 1.2 und RichFaces 3.3.3
Sorry, but my english knowledges are not very good.
There is no active value in boundaryDatesMode attribute for selecting previous, next months dates.
Write select value in attribute boundaryDatesMode.
<rich:calendar boundaryDatesMode="select" ></rich:calendar>
It works for selecting previous and next months dates on current displayed calender popup.
I have the following simple datepicker in JqueryUI:
$('#id_due_date').datepicker().datepicker("option", "dateFormat", "yy-mm-dd");
$('#id_due_date').datepicker("setDate",
new Date($("input#id_due_date").attr("value")));
So, if the already has a value it shows that date instead of blank (second line of code above).
However, i'm having the following difficulties:
I want to be able to show the month of that initial value in the calendar. So if that date is 3 months ahead, i want to show that month in the calendar.
With this code, if i'm not setting an initial value, it defaults to today, which is kind of wrong for my application as some items can have a missing due_date
Can you please help?
new Date is a javascript native method and expects the javascript dateformat to be correct
check out alt field, altField in jq ui
use datepicker({option:value})
check the changeMonth option in jq ui
check the change year option in jq ui
This should work:
$('#id_due_date').datepicker({dateFormat:"yy-mm-dd"});
Or to set the default date 1 month in the future:
$('#id_due_date').datepicker({dateFormat:"yy-mm-dd", defaultDate:'+1m'});
Then, just make sure that the input it's attached to is either blank or in the format of "2011-02-18" (yy = yyyy FYI; see here)
This way, the datepicker will automatically pick up the date in the box and show it. If it's blank, it will just display today's date.