bootstrap date picker - changing via javascript not syncing with Calender - javascript

I have a element I'm using as a datepicker:
I set it up using the following script:
$('#fltProdFromQuo').datepicker({
format: "dd M yyyy",
todayBtn: "linked",
autoclose: true,
todayHighlight: true
});
And set the value to 1st June 2020:
$('#fltProdFromQuo').val('2020-06-01') ;
WHich seems to work until I click the field, and the calander shows todays date:
Does anyone have any idea what I've missed to make the calendar show the correct date?
Thank you in advance of any help given.

Found the answer. I didn't know that once I set the date I had to "Update" it to change the calender, never had to do this before:
$('#fltProdFromQuo').val('2020-06-01') ;
$('#fltProdFromQuo').datepicker('update');
Working tickety boo now!

Related

Set min/max Date of jquery Datepicker

I am having trouble understanding how to set the min/max Date of the jquery Datepicker. When I check the docs, i see that the dateformat is expected in new Date(2009, 1 - 1, 26).
What does the 1-1 mean? When I chec w3c schools for js dateformats, I cannot find this one.
So I tried
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'yyyy-mm',
minDate: new Date(2001-01),
maxDate: '+15Y'
});
But that leaves me with completely random results... It starts 2006 and ends 2026.
Here is fiddle
http://jsfiddle.net/ANF2y/58/
In JavaScript month is calculated from 0 to 11. So while creating a new Date use current month - 1.
1 - 1 equates to 0. So that is a valid month (0 - January).
In your case set minDate as below.
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true,
minDate: new Date(2001, 0, 1),
maxDate: '+15Y',
dateFormat: 'yyyy-mm'
});
that is because the jquery date picker only shows 15 items at a time, there is no max date set so you can go as far in the future as you want. When it is set to 2001 you see 2006 in the dropdown as it is limited to 15 items. Select 2006 and then you'll see 2001 in the dropdown. Is your question can I show more items in the year dropdown list?
I'm not going to go into minDate or maxDate as that has been well covered. But in addition to that, what you are looking for is yearRange will set the number of visible items in the year dropdown of the jquery date picker.
The documentation states:
The range of years displayed in the year drop-down: either relative to today's year ("-nn:+nn"), relative to the currently selected year ("c-nn:c+nn"), absolute ("nnnn:nnnn"), or combinations of these formats ("nnnn:-nn"). Note that this option only affects what appears in the drop-down.
Reference

meteor bootstrap3 datetimepicker disable days of week not working

I'm using bootstrap 3 in a meteor project and would like to disable most of the days of the week in a datetime picker.
The other options I set seem to be working, but daysOfWeekDisabled won't disable any days.
I found this answer here Limit bootstrap-datepicker to weekdays only? that suggests it should work (and it does in the twiddle) but I can't get my code to work.
The options I'm setting are
Template.requestLayout.rendered = function(){
$('.datetimepicker').datetimepicker({
pickTime: false,
startDate: moment().day(12),
defaultDate: moment().day(12),
daysOfWeekDisabled: [0,1,2,3,6],
autoclose: true
});
}
Any ideas why it might not be working?
try changing to this
daysOfWeekDisabled: "0,1,2,3,6"

Jquery date time picker with 2013-05-30 19:02:51.497 format

I am able to bring the jquery calendar with the following code.
$( "#startDate, #endDate" ).datetimepicker();
this also brings me date picker and time I get the following format : 10/08/2013 05:23 PM but I want the selected date to have the following format 2013-05-30 19:02:51.497 how do I do that with jquery?
thanks
You can check it by using jquery-ui-datetimepicker-plugin
$('#startDate, #endDate')
.datetimepicker({ dateFormat: 'yy-mm-dd', timeFormat: 'hh:mm:ss' });
I have followed this
but did not work and working one is
$("#startDate, #endDate").datetimepicker({ dateFormat: 'dd-mm-yy hh:mm:ss'});

How to display hours in JQuery datapicker

I want to use simple JQuery datapicker but not only to select the date. I want to add hours to the date format but I also want to preserver the classic vie of the calendar. I just want to add hours as extra functionality to define precisely the time. Is this possible?
<script type="text/javascript">
//For calendar
$(".datepicker").datepicker({
inline: true,
showWeek: true,
firstDay: 1,
dateFormat: 'yyyy-mm-dd HH:MM:ss',
});
</script>
http://trentrichardson.com/examples/timepicker/
you can try the above plugin with the combination of datepicker
you can even use the default $('.datepicker').datetimepicker();
jQuery UI's datepicker picks dates, not times. You can add a distinct field for the hours, e.g. a select field.

jQuery Date Picker Pick Year First and then Month

What changes are needed to show the Years dropdown first and then the months dropdown as second field in jQuery so users can select which year they are born and then select the month in that year. We still want to restrict that calendar cannot display date greater than today.
If user selects 2011, they should not be allowed to select date greater than today.
I was looking for this also and got here but no solution so I get into jquery-ui.custom.min.js and found the an option. Its as below. Hope it helps although its a bit late..
$( "#datepicker_id" ).datepicker({
showOn: "button",
buttonImage: "images/calendar.png",
buttonImageOnly: true,
dateFormat:'mm-dd-yy',
changeYear: true,
changeMonth: true,
showMonthAfterYear: true, //this is what you are looking for
maxDate:0
});
But if you found that already you should have posted it here :)
For this simple use below line:
startView: 2
And add below line to prevent to select date greater than today:
endDate: new Date(),

Categories

Resources