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.
Related
I have a simple angular code that opens the jQuery datepicker with a future date (within an angular directive):
scope.StartDate = $filter('date')(scope.BillingDate,'MM/dd/yyyy');
$('#rangeFromSelect').datepicker({maxDate: new Date("10/10/2020")}); // this fires up the datepicker correctly
If scope.BillingDate = 06/12/2018 it shows up the datepicker correctly, but I wish to hide any days before that particular date. My approach to hide the previous navigation works when I do the following:
$('.ui-datepicker-prev').hide();
This works OK until I press the next month and get back to the previous month (ie, the previous navigation button shows up again).
Is there anyway to hide the arrow for that specific month? Or is there a way I could completely disable the dates before the date I mentioned here?
Not sure if I understand the problem correctly but could you use the Min Date Option?
$( ".selector" ).datepicker({
minDate: new Date(2007, 1 - 1, 1)
});
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//
});
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'm completely new to chronoforms.
I have joomla 3.0 running on my localhost and installed the chronoforms script V4 RC3.3. I have already put some textboxes and stuff together in a form an everything works fine so far.
My problem is the datetime picker. I put the box in my wizard an changed it to mootools picker and vista style. No problem so far. But how can I change the output of the date format to dd.mm.yyyy?
I'm also use "format: '%d %m %Y' ", But i have 4 field start date, end date, start time and end-time.
Above format is change all field, but i try to change only date field.
I searched forums and everything I tried doesn't work. It all ended in the format yyyy-mm-dd. So where do I have to change something to get the output I want?
Many thanks in advance to all who wanna help...
Upgrade to new Chronoforms V5 that already have a new Datepicker element. Edit your form, select Design tab, edit datepicker field and you will find selectbox called Format to choose the date format.
try this
var dp = new DatePicker("#yourid",{format:"%d %m %Y "});
I'm using jQuery UI's datepicker to display a calendar with select lists. Input field and select list are synchronized, so when you change value of either the datepicker or select list, the value of the other fields will change accordingly.
The datepicker is used with the Restrict date range functionality (http://jqueryui.com/datepicker/#min-max). That does its job perfectly - the END date can't be before the START date and you are unable to choose previous days accordingly. Of course, you can't choose that the START date is after the END date either.
The problem is with the select list. Even if "restrict date range" does its job, you still can select any date with the select lists. Therefore, I'm looking for this solution when you use the select lists (it shouldn't affect anything if you only use the calendar icon):
If you first select the START date, the END date should automatically change to one day after the selected date.
If you have both dates selected and decide to change the START date to the date that is after the END date, the END date should again change to one day later.
If you have both dates selected and decide to change the END date to the date that is before the START date, the START date should change to one day before the END date.
I have tried with using this piece of code to affect #1 and #2:
$('#start').change(function() {
var date2 = $('#start').datepicker('getDate', '+1d');
date2.setDate(date2.getDate()+1);
$('#end').datepicker('setDate', date2);
});
However, it doesn't seem to affect anything. Here is the whole example on jsFiddle:
http://jsfiddle.net/JW4jg/