I'm using bootstrap datetimepicker in my project. And I'm facing the problem with setting the date value after my input control rendered.
At first I set up the datetimepicker as follow:
$(".date").datetimepicker({
defaultDate: moment(),
format: 'YYYY-MM-DD'
}).on('keypress paste', function (e) {
e.preventDefault();
return false;
});
And then I load the actual data date value of the control by calling below function:
function SetDate(control,date)
{
$('#'+ control).datetimepicker({
defaultDate: new Date(date)
});
}
And then the datetimepicker show only current date but it return correct date value that is not current date when I fetch the value with document.getElementById('elementname').value.
Kindly advise. Thanks.
I guess, for the options showed, that you are using http://eonasdan.github.io/bootstrap-datetimepicker
The way you are using the picker is wrong, because what you are doing is calling again the picker, better do it this way:
$('#myDatepicker').datetimepicker();
And then with your control/function (I will use a button triggering the action)
$('#set').on('click', function() {
SetDate("myDatepicker", moment().subtract(1, 'day'));
});
function SetDate(control, date) {
$('#' + control).data('DateTimePicker').defaultDate(date);
}
Where .data('DateTimePicker').defaultDate(date) is what set the defaultDate for later.
And where moment().subtract(1, 'day')) is taking out one day and is the parameter date, and is not necesary to parse out again as is a moment object;
If you need to parse a string date you could use:
moment('20170202','YYYY-MM-DD')
Where first parameter is your date string.
https://momentjs.com/docs/#/parsing/string-format/
Here how the options are set for the plugin http://eonasdan.github.io/bootstrap-datetimepicker/Options/
Fetch the value using the following :
$("#elementname").data('datepicker').getFormattedDate('YYYY-MM-DD');
Related
I have a form to submit data. I have one Date field in that form. All is working fine. But when i try to retrieve data to update including date. i get error "ngModel:datefmt".
I have tried converting date formats in database YY-mm-dd and dd-mm-yy.
I have tried converting date formats in JavaScript to yy-mm-dd and dd-mm-yy.
I am using input type ="date".
You have the date as string hence you are getting the error you need to convert it to date object ,
$scope.dateField = new Date(date_string);
I would recommend to use a directive for this to use it in the input element.
<input convert-date type="date" ng-model="dateField">
app.directive('convertDate', function(){
return {
restrict : 'A',
scope : {ngModel : '='},
link: function (scope) {
if (scope.ngModel)
{
scope.ngModel = new Date(scope.ngModel);
}
}
}
});
I have a datepicker component in my C# app, which takes its default value from the server through AJAX call. The problem is, it ignores the date format I've defined as a parameter. I looked into the code and it seems that the date format is not set on the settings variable, so JQuery uses the default value (mm/dd/yy).
Here is my code:
$.when(_getUserProfileValue(defValue))
.done(function (result) {
// result is 23.07.2015
// this line shows the correct date and format
$("#divTest").text(result.d);
// new Date(res) gives back invalid date, but datepicker shows the result from server
// without this line, datepicker shows a completely wrong date
// TODO: format is still ignored
var aDate = new Date(result.d);
$calendar.datepicker({
dateFormat: "dd.mm.yy"
});
$calendar.datepicker("setDate", aDate);
})
Any ideas?
Might be because you have already initialized the datepicker on that element, in that case to update the date format of an existing datepicker use the option method like
$calendar.datepicker('option', 'dateFormat', "dd.mm.yy");
I am using Angular-UI Bootstrap Datepicker directive for my project. What i want to do is, when i click to button, datepicker value is updating as expected, however, datepicker popup shows the wrong day. I am using dd.MM.yyyy format. It shows the mm.dd.YYYY instead of dd.MM.yyyy. is it a bug or am i missing something?
function appConfig(datepickerConfig, datepickerPopupConfig) {
datepickerConfig.startingDay = 1;
datepickerPopupConfig.datepickerPopup = 'dd.MM.yyyy';
}
Plnkr
The date picker works just fine in my understanding. The problem is that you change the value in your controller with this.date = "01.10.2015".
You might consider doing this with this.date = new Date(2015,9,1) because date is of type date in the background. The directive cares for the transformation of these formats.
EDIT:
If you want to stick to your way, you could use a parse function like this (found it here):
function parseDate(input) {
var parts = input.match(/(\d+)/g);
return new Date(parts[2], parts[1]-1, parts[0]);
}
And the call:
this.date = parseDate("01.10.2015")
Here is your updated plunker.
I am using this MooTools datepicker.
How can I get the current value (either Unix TS or date) from it with JavaScript?
My code is:
window.addEvent('load', function() {
new DatePicker('.demo_vista', {
pickerClass: 'datepicker_vista',
format: 'm/d/Y',
allowEmpty: true,
toggleElements: '.date_toggler'
});
});
I have tried the standard getElementById('mydatepicker').value but I get [object NodeList] everytime.
There are different versions of this datepicker. Some output UNIX some not.
To get the value from the input field/datepicker, If you have a id for it you can use $('mydatepicker').value or document.id('mydatepicker').value, or plain javascript like you described. Check if the value you get out $('mydatepicker').value is already UNIX. otherwise you can parse the date.
If you don't have UNIX timestamp from the input value you can convert the date to it by using:
var unix = new Date(this.value).format('%s');
In the options (if you don't get a UNIX timestamp) you can also add inputOutputFormat: 'U', to specify UNIX should be the value of the input field (some versions have this as default). This input field is hidden because datepicker creates a clone that is the one you see. But this hidden field is the one in the html markup and so the one with ID.
Check this demo, change a date and look at console.
DatePicker options:
format - is a visible date format. Does not affect the actual output
when your form is submitted
inputOutputFormat - define how the input value of the original
datepicker input element is interpreted ( the default value U is a
Unix-timestamp )
onSelect - Event hook triggered when a date is selected
new DatePicker('.demo_vista', {
pickerClass: 'datepicker_vista',
format: 'm/d/Y',
inputOutputFormat: 'm/d/Y',
allowEmpty: true,
toggleElements: '.date_toggler',
onSelect: function( date ) {
alert( date );
alert( $('mydatepicker').value );
}
});
Default output from your form will be a Unix-timestamp unless you define inputOutputFormat option, and that value can be taken with $('mydatepicker').value ( is the same as document.getElementById('mydatepicker').value )
I have the jquery ui datepicker in my page and use two input elements id of 'startDate' and 'endDate'. My javascript has a function 'setRange()' in which min date is defined but I want to define max date that should be startDate+6 days only. I mean user must not select the date after 6 days of start date.
Please Help me. Thanks
I built something similar the other day. Basically you need to set the maxDate option on the endDate element, every time startDate is changed.
I like using moment.js for dates, since it allows you to do things like date.add('days',6)
Here's something to start you off:
$(function() {
$('#start_date').change(function() {
var start = $(this).val();
var maxDate = new Date(); // I'll leave this to you...
$('#end_date').datepicker('option','maxDate',maxDate);
}).trigger('change'); // this sets the constraint on load, too
});