We Keep Coding

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

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!

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)
});

Mobiscroll date modal customisation

Have a mobiscroll instance to show date:
$(document).ready(function () {
$("#date").mobiscroll().date({
theme: 'wp',
mode: 'clickpick',
onChange: function (ins) {
console.log(JSON.stringify(ins));
}
});
});
Currently the datepicker displayed in the format like: dd/mm/yyyy
How can swap the order be to see mm/dd/yyyy ?

$(document).ready(function () {
$("#date").mobiscroll().date({
theme: 'wp',
mode: 'clickpick',
onChange: function (ins) {
console.log(JSON.stringify(ins));
},
dateFormat: 'mm/dd/yyyy'
});
});
Here's the link for more info:
https://docs.mobiscroll.com/3-1-0/jquery/datetime#!localization-dateFormat

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");

How can I use the same $(document).ready(function() for multiple inputs?

I'm new to JavaScript/jQuery, I have 4 date selections within a form using DatePicker.
Seeing as the settings are the same, I tried using dp1 for all 4 date selections but it doesn't work. The first date selections work but the 3 others don't.
So at the moment I am doing it like this, but it seems pointless extra code as the settings are the same.
<script type='text/javascript'>
$(document).ready(function() {
$('#dp1').datepicker({
autoclose: true,
format: "yyyy-mm-dd"
});
});
</script>
<script type='text/javascript'>
$(document).ready(function() {
$('#dp2').datepicker({
autoclose: true,
format: "yyyy-mm-dd"
});
});
</script>
<script type='text/javascript'>
$(document).ready(function() {
$('#dp3').datepicker({
autoclose: true,
format: "yyyy-mm-dd"
});
});
</script>
<script type='text/javascript'>
$(document).ready(function() {
$('#dp4').datepicker({
autoclose: true,
format: "yyyy-mm-dd"
});
});
</script>
Is there another way to do it?

Sure you can :) And notice that you don't even need to use 4 different datepicker functions since you can use jQuery selectors to target all 4 datepickers like this:
<script type='text/javascript'>
$(document).ready(function() {
$('#dp1, #dp2, #dp3, #dp4').datepicker({
autoclose: true,
format: "yyyy-mm-dd"
});
});
</script>

Yes! You can do this:
<script type='text/javascript'>
$(document).ready(function() {
$('#dp1').datepicker({
autoclose: true,
format: "yyyy-mm-dd"
});
$('#dp2').datepicker({
autoclose: true,
format: "yyyy-mm-dd"
});
$('#dp3').datepicker({
autoclose: true,
format: "yyyy-mm-dd"
});
$('#dp4').datepicker({
autoclose: true,
format: "yyyy-mm-dd"
});
});
</script>

or (just give them all one css class all_dps)
<script type='text/javascript'>
$(document).ready(function() {
$('.all_dps').datepicker({
autoclose: true,
format: "yyyy-mm-dd"
});
});
</script>