How gijgo/datepicker to show and select only year/month? - javascript

If there is a way with gijgo/datepicker to show and select only year/month?
I found option format: 'mmmm-yyyy', like
$('#expire_date').datepicker({
uiLibrary: 'bootstrap4',
iconsLibrary: 'fontawesome',
showOtherMonths: true,
selectOtherMonths: true,
format: 'mmmm-yyyy',
footer: true,
modal: true, // if to set this parameter to false I have the same problem
change: function (e) {
alert('Change is fired : '+e.target.value);
}
});
But it works only partly I need : result is year-month, but day selection is possible...
If, yes, please example...
Thanks!

Related

How do I access $(this).val() in another function by passing the reference from the onclick event?

Current code:
function validateInput() {
console.log($(this).val())
}
$("#element")
.datepicker({
todayHighlight: true,
weekStart: 0,
format: "yyyy-mm-dd",
onClose: function() {
validate.validateInput()
}
})
Outcome/Issue:
When I do this, I am getting nothing, even if I pick any date on the datepicker. I want to be able to get the current selected value if selected or null if not. Am I doing this correctly?
You should pass this to the function so that you can refer that inside the function to access the value. Also, not sure why you are using validate in validate.validateInput():
function validateInput(el){
console.log($(el).val());
}
$("#element")
.datepicker({
todayHighlight: true,
weekStart: 0,
format: "yyyy-mm-dd",
onClose: function() {
validateInput(this);
}
});
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
<p>Date: <input type="text" id="element"></p>
Pass it as an ordinary argument.
function validateInput(el) {
console.log($(el).val())
}
$("#element")
.datepicker({
todayHighlight: true,
weekStart: 0,
format: "yyyy-mm-dd",
onClose: function() {
validateInput(this)
}
})
Well u could do like this:
function validateInput(element){
console.log($(element).val())
}
and call
$("#element")
.datepicker({
todayHighlight: true,
weekStart: 0,
format: "yyyy-mm-dd",
onClose: function() {
validate.validateInput('#element');
}
});
or dinamically
$(".date_input")
.datepicker({
todayHighlight: true,
weekStart: 0,
format: "yyyy-mm-dd",
onClose: function(e) {
validate.validateInput(e.target);
}
});
Providing validate.validateInput() doesn't need this to refer to validate (eg to call other validate methods), then you can use Array.prototype.bind() to control the interpretation of this, without needing to pass a parameter.
function validateInput() {
console.log($(this).val());
}
$("#element").datepicker({
'todayHighlight': true,
'weekStart': 0,
'format': "yyyy-mm-dd",
'onClose': validate.validateInput.bind(this)
});

Disable Auto formatting of date in bootstrap datepicker

Am having issue where if someone enters an invalid date manually such as "%/4/12" into the datepicker it will autoformat it to "04/12/2017" or if you enter "12/123/20258" it formats to ‘12/12/2025 which I don't want. Is there any way to disable this? Here is what I already have:
$(function () {
$('#new-effective-date').datetimepicker({
format: 'MM/DD/YYYY',
defaultDate: false,
useCurrent: false,
keepInvalid: true
});
});
Add:
useStrict
http://eonasdan.github.io/bootstrap-datetimepicker/Options/#usestrict
and Change your codes to this:
$(function () {
$('#new-effective-date').datetimepicker({
format: 'MM/DD/YYYY',
useStrict: true,
keepInvalid: true,
});
});

JQuery DatePicker Date Formatting issue when copying

Look to just copy the Year to the 2nd input - not the entire date. Here is the HTML so 1st input - date format is correct. 2nd input - date format needs to be just the year and not the whole date.
look here
http://jsfiddle.net/xyp7khfe/13/
<input id="sdate" />
<input id="edate" />
and here is the JQUERY
$('#sdate').datepicker({
dateFormat: 'dd-M-yy',
changeMonth: false,
changeYear: true,
firstDay: 1,
onSelect: function () {
$('#edate').val(this.value);
}
});
Instead of updating the value with the .val() method, you could use the setDate method to update the value while taking the dateFormat property value into consideration:
$('#edate').datepicker('setDate', new Date(this.value));
Updated Example
$('#sdate').datepicker({
dateFormat: 'dd-M-yy',
changeMonth: false,
changeYear: true,
firstDay: 1,
onSelect: function () {
$('#edate').datepicker('setDate', new Date(this.value));
}
});
Alternatively, you can create a date based on the value and then use the .getFullYear() method:
$('#edate').val(new Date(this.value).getFullYear());
Updated Example
$('#sdate').datepicker({
dateFormat: 'dd-M-yy',
changeMonth: false,
changeYear: true,
firstDay: 1,
onSelect: function() {
$('#edate').val(new Date(this.value).getFullYear());
}
});

Datepicker onClose event not firing when used as a backgrid editor

I have searched the net and i cannot find any sort of light for this problem. Here is my snippet.
Backgrid.CustomDateCell = Backgrid.DateCell.extend({
editor: Backgrid.InputCellEditor.extend({
attributes: {
type: "text"
},
events: {},
initialize: function(){
Backgrid.InputCellEditor.prototype.initialize.apply(this, arguments);
var _input = this;
$(this.el).prop('readonly', true);
$(this.el).datepicker({
autoclose: true,
todayHighlight: true,
format: "mm/dd/yyyy",
viewMode: "months",
minViewMode: "months",
onClose: function(dateText, inst){
var command = new Backgrid.Command({});
_input.model.set(_input.column.get("name"), dateText);
_input.model.trigger("backgrid:edited", _input.model, _input.column, command);
command = _input = null;
}
});
}
})
});
So basically, what i want is to trigger backgrid:edited of the backgrid cell model. But it seems that i am missing something here. The onClose event is never called and no error is showing in the console. I also tried the onSelect event but to the same result.
Thanks in advance
As mentioned in the comments:
This is a bootstrap datepicker, so onClose is not a valid option. Attach a listener to the hide event instead:
$(this.el).datepicker({
autoclose: true,
todayHighlight: true,
format: "mm/dd/yyyy",
viewMode: "months",
minViewMode: "months"
});
$(this.el).on("hide", function(e) {
var command = new Backgrid.Command({});
_input.model.set(_input.column.get("name"), e.date);
_input.model.trigger("backgrid:edited", _input.model, _input.column, command);
command = _input = null;
});
e.date should give you the equivalent of dateText

Set default bootstrap date and datetime values at page load using javascript

I'm using date and datetime functions for my textfields, when I click at textfield it shows the calender and I select date and datetime from calender and my functions are
$('.date-picker').datepicker({
rtl: Metronic.isRTL(),
autoclose: true,
format: "mm/dd/yyyy",
startDate: new Date()
});
$(".datetime-picker").datetimepicker({
autoclose: true,
isRTL: Metronic.isRTL(),
format: "mm/dd/yyyy - hh:ii",
pickerPosition: (Metronic.isRTL() ? "bottom-right" : "bottom-left")
});
What I want is when I load my page the values set by automatically current date and datetime. I search about these functions but cannot set default values of current date and datetime. I also try defaultdate: new Date() OR defaultdate: '03/09/2015' but didn't work for me. How could I do this?
I've done this but my programme is not working properly I don't know why is this happening?
Use setDate as shown below, (this code should be on the document ready event)
$('.date-picker').datepicker({
rtl: Metronic.isRTL(),
autoclose: true,
format: "mm/dd/yyyy"
}).datepicker("setDate", new Date());
Sample from my code:
Display current Date:
buildLogDateToTxt.datepicker({
showOn: "button",
buttonImage: "images/calendar.png",
buttonImageOnly: true,
onClose: function (dateText, inst) {
this.fixFocusIE = true;
this.focus();
}
}).datepicker("setDate", new Date());
Set previous date:
buildLogDateFromTxt.datepicker({
showOn: "button",
buttonImage: "images/calendar.png",
buttonImageOnly: true,
onClose: function (dateText, inst) {
this.fixFocusIE = true;
this.focus();
}
}).datepicker("setDate", "-7");

Categories