I'm experimenting with Boootstrap Date Range Picker
Whats the best way to set Date into a Single Date Picker via Javascript?
Single Date Picker initialization code
$(#date).daterangepicker({
locale: {
format: 'DD/MM/YYYY',
},
singleDatePicker: true,
showDropdowns: true
});
I tried with below code:
$("date").data('daterangepicker').setStartDate(data.startDate);
This way, I'm getting below output, which is not really acceptable!!!
Hope someone come up with a nice solution.
Cheers!!
Try
$("date").data('daterangepicker').setStartDate(data.startDate);
$("date").data('daterangepicker').setEndDate(data.startDate);
That is the only way I can find so far.
Try this:
Set Date:
$(#date).daterangepicker({
locale: {
format: 'DD/MM/YYYY',
},
singleDatePicker: true,
showDropdowns: true,
startDate: '2020/03/04',
startDate: '2020/03/04'
});
Reset date:
$("#date").data('daterangepicker').setStartDate('2020/03/04');
$("#date").data('daterangepicker').setEndDate('2020/03/04');
If u gonna reset current date:
$("#date").data('daterangepicker').setStartDate(moment());
$("#date").data('daterangepicker').setEndDate(moment());
I had the same issue, in my case. The issue was in the startDate format, it was not matching with the format given in locale:{format:'DD/MM/YYYY'}
Related
bootstrap-datetimepicker
I am using this plugin and having issues in enabling certain dates.
This snippet correctly enables dates during initialization.
$("#example-datepicker").datetimepicker({
locale: "en",
format: 'M.D.YYYY',
useCurrent: true,
enabledDates: ['2020-07-24', '2020-08-25']
});
But after initialization, when I wanna update enabled dates, it doesn't work.
$("#example-datepicker").data("DateTimePicker").enabledDates(['2020-02-24', '2020-05-25']);
Any help is much appreciated!
PS: Are there any other plugins that can control what dates to enable?
Add extraFormats in initialization.
$("#example-datepicker").datetimepicker({
locale: "en",
format: 'M.D.YYYY',
extraFormats: ['YYYY-MM-DD'],
useCurrent: true,
enabledDates: ['2020-07-24', '2020-08-25']
});
By adding that, the plugin can understand dates provided in enabledDates.
The reason it was rendered correctly at initialization is that since YYYY-MM-DD is a standard Date format, it is recognized.
But after initialization (format has been specified), it can no longer recognize the standard format.
I've been plugging away at this for too long and I cannot see where the formatting for Bootstrap's datetimepicker control is being overridden.
The Bootstrap DTP uses Moment.js behind the scenes to format its time picker. The JS code looks like this:
selector.find(".datepicker").each(function() {
var $that = $(this);
$that.datetimepicker({
sideBySide: true,
useCurrent: false,
minDate: new Date(1910, 1, 1)
});
$that.children("input").on("focus", function() {
$that.data("DateTimePicker").show();
});
});
Nothing appears too complex there and the formatting in the HTML looks similarly simple:
#Html.EditorFor(x => x.DateTime, new { #dateFormat = "DD/MM/YYYY HH:mm", #mandatory = true })
However when the model is bound to the view and the JS iterates over the inputs, the times displayed go from 24 hour (e.g. 14:00) to 12 hour (i.e. 02:00).
I'm convinced this has to do with moment.js integration and very likely its handling of timezones but I can't see where I might apply different settings. Suggestions would be more than welcome at this point.
Try this
$that.datetimepicker({
format: 'DD/MM/YYYY HH:mm',
sideBySide: true,
useCurrent: false,
minDate: new Date(1910, 1, 1)
});
$('#datetimepicker1').datetimepicker({ format: 'dd/mm/yyyy', pickTime:false})
when I used this code to pick date,it is picking minute instead of month.what might be the reason?
you should use MM:
$('#datetimepicker1').datetimepicker({ format: 'dd/MM/yyyy', pickTime:false})
see :MSDN Documentation on Js date formatting
I wanted to ask, how can i manipulate data in Javascript, to have data like this in datetime input:
From 2015.10.12
Not as default:
2015.10.12.
Here is my code, You will see format option for date formatting, but this is wrong idea:
$('#datetimepicker1').datetimepicker({
locale: 'en',
format: 'FROM' + 'YYYY-MM-DD',
});
I am building form with 2 inputs, From and To, and when user selects some date, i wanted to show him not just date, but also this info.
Thank You for help.
This code will allow for custom text.
format: '[AB] YYYY-MM-DD'.Needed to add brackets [].
I am using Datetimepicker for date and time input. But i am not able to understand what is the use of timezone option in it. I mean when i submit the input to datetime datatype in mysql and then select back what changes i am going to face because of timezone. I am not able to get it. Please help me. I am using this code for datetimepicker.
$(document).ready(function() {
$('#datepicker').datetimepicker({
showSecond: true,
dateFormat: 'yy-mm-dd' ,
timeFormat: 'HH:mm:ss',
showTimezone: true,
LocalTimezone: false,
stepHour: 1,
stepMinute: 1,
stepSecond: 10
});
});
I have found this
"showTimezone?: boolean; //Default: null - Whether to show the timezone selector not when selecting the date picker".
for more details please use this
https://github.com/borisyankov/DefinitelyTyped/blob/master/jquery.ui.datetimepicker/jquery.ui.datetimepicker.d.ts
My guess:
not because of timezone but your dateFormat set doesn't match datetime type in your database.
try set dateFormat to YYYY-MM-DD