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 )
Related
i have several input fields initialized as flatpickr inoout fields using a class in a single page and im trying to set the current value of the each input field onChnage (selecting the date) with the dateStr value but after few tries i got no luck. any idea how to do it?
here is the code im using:
flatpickr.localize(flatpickr.l10ns.fa);
flatpickr.l10ns.default.firstDayOfWeek = 6;
flatpickr(".datePicker", {
onChange: function(selectedDates, dateStr, instance) {
this.value = dateStr;
},
});
apparently, there is no need for extra code and I just had to add the altInput: true to the options for it to work. the document was not clear about this at all.
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');
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");
The jQuery Datepicker is working great, but I would like the submit button to read different text based on whether or not the day selected is today. The submit button is a <button> and the text is the value attribute.
Is there any way to do this? My web searches haven't turned up any results.
Try like below
var dp = $('#datepicker').datepicker("getDate");
1) using the above statement, you can get the date that has be selected in datepicker (ie., parsed as date datatype)
2) Using date.toDateString(), you can get the date string which can be used to compare with datepicker's date.
$('#datepicker').datepicker();
$('button').on('click', function () {
var dp = $('#datepicker').datepicker("getDate");
var today = new Date();
if (today.toDateString() == dp.toDateString()) {
//write your code to change the text in div
}
});
FYI: value attribute is not associated with div element, I guess you're referring to custom data* value attribute.
If so then you can change it using .data() method of jQuery. Example
$('div').data('value', 'whatever you wish');
JSFiddle
If I Understood your question correctly, You want to make sure that date picked is today or not, upon submission of form.
I've gone through google, ended up with an answer, Hope It work out.
function ValidRange(date1)
{
var date=new date(); //Today
//Convert these dates into milliseconds
var date1_ms=date1.getTime();
var date_ms=date.getTime();
//Calculate difference between them
var difference_ms = date_ms - date1_ms;
return difference_ms; // It will return 0 if date is today.
}
Note: You then need to parse the strings you are getting from the UI, with Date.parse, like this:
ValidRange(Date.parse(Date_Picked));
Try this.