Script
<script>
$(function () {
$(".datepicker").datepicker();
});
</script>
Textbox
<input class="datepicker" id="_Date" name="Date" type="text" value="01-Jan-2017">
When I select date form textbox then the format looks like 10/11/2017 but I need the format like 11-Oct-2017
You can achieve this by using format option of bootstrap datepicker
$(function () {
$('.datepicker').datepicker({
format: 'd-M-yyyy'
});
});
d: Numeric date
M: Abbreviated month names
yyyy: 4-digit years
DEMO
Use this:
format: "DD MMM YYYY"
Related
How do I change the format of text input in datepicker dynamically with vue and datepicker component. When annual checkbox is click the format is 'dd MMMM' and when the checkbox is uncheck the format is 'dd MMMM yyyy'.
I am using Vue3 with #vuepic/vue-datepicker package.
Currently I already set the format as reactive value which in my understanding should rerender the component if the value change.
<template>
<div>
<Datepicker v-model="date" autoApply :format="format" />
<label>
<input type="checkbox" v-model="isAnnual" :value="true"> Annual
</label>
</div>
</template>
<script setup>
import { ref, watch } from 'vue';
import Datepicker from '#vuepic/vue-datepicker';
import '#vuepic/vue-datepicker/dist/main.css';
const date = ref(new Date);
const format = ref('dd MMMM yyyy');
const isAnnual = ref(false);
watch(isAnnual, (val) => {
if (val) {
format.value = "dd MMMM"
} else {
format.value = "dd MMMM yyyy"
}
})
</script>
Hate being this guy, but wouldn't it be easier to have a single format for annual and not annual?
But you can always ust the
JSON.syringify(Object)
and attempt to use moment to format.
You can maybe use ternary operator inside the format value like -
<Datepicker v-model="date" autoApply :format="isAnnual ? dd MMMM : dd MMMM yyyy" />
<div class="col-sm-8">
<i class="far fa-calendar-alt"></i>
<input
id="dtpFrom"
type="text"
placeholder="Datepicker"
placement="top"
class="form-control"
bsDatepicker
[bsConfig]="{dateInputFormat: 'DD MMM YYYY',containerClass: 'theme-blue'}"
[bsValue]="todayDate"
[minDate]="minDate"
[maxDate]="maxDate"
/>
</div>
import { BsDatepickerConfig } from'ngx-bootstrap/datepicker';
export class CardlessTransactionsComponent implements OnInit {
datePickerConfig: Partial<BsDatepickerConfig>;
privatetodayDate: Date = newDate();
minDate: Date;
maxDate: Date;
}
constructor(privatefb:FormBuilder) {
this.todayDate = newDate();
this.minDate = newDate();
this.maxDate = newDate();
this.minDate.setDate(this.minDate.getDate() - 7);
this.maxDate.setDate(this.maxDate.getDate() + 0);
at the HTML file, I think there is something need to do inside the bsValue while at the ts file, I have no idea where to change to get the output that I want which is to make it display the month's name instead of the month numeric value
You should get today's date through a formControl instead of outside it to get this working...
relevant HTML:
<div class="row">
<div class="col-sm-8">
<i class="far fa-calendar-alt"></i>
<input
id="dtpFrom"
placeholder="Datepicker"
placement="top"
class="form-control"
bsDatepicker
formControlName="dateMDY"
[bsConfig]="{dateInputFormat: 'DD MMM YYYY',containerClass: 'theme-blue'}"
[bsValue]="todayDate"
[minDate]="minDate"
[maxDate]="maxDate"
/>
</div>
</div>
working stackblitz here
Thanks for the suggestions, i have already figure it out. (make changes at the TS file)
initializeForm () {
this.cardlessForm= this.fb.group ({
dateFrom:new Date(),
dateTo:new Date ()
});
}
I just add the 'new Date ()' at the dateFrom and dateTo then i removed the code ( this.maxDate.setDate(this.maxDate.getDate() + 0);
I put a new datepicker into a admin page and it lets me select the date needed but when I had data-date-format="yyyy/mm/dd" as dd/mm/yyyy, it would not save the date in the database and would save it as 0000-00-00 so I changed the format to data-date-format="yyyy/mm/dd" and it works now and saves the date correctly now in the database but is there any way I can have the date format as dd/mm/yyyy in the input field as it currently shows as 2019/10/22
The code I have is below
<div id="exstdate" class="col-lg-6 input-group date" data-date-format="yyyy/mm/dd">
<input type="text" class="form-control" name="exstdate" value="<?php echo $exstdate; ?>" id="exstdate" readonly />
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span><div class="error alert-danger"></div>
</div>
<script>
$(function () {
$("#exstdate").datepicker({
language: "en",
autoclose: true,
todayHighlight: true,
dateFormat: 'dd/mm/yyyy'
}).datepicker('update', new Date());
});
</script>
I am trying to implement a dynamic start date for a bootstrap datepicker while using vuejs. Below is an example of what I have in my code currently. Using -30d or a date formatted as 01-01-2016, but not 2016-01-01 works.
<input type="text" name="cancelDate" id="cancelDate" autocomplete="off" class="form-control form-control-small"
v-model="sale.cancelDate"
v-bind:class="{ 'has-error': !validation.cancelDate }"
v-datepicker start-date="{{sale.saleDate}}" />
<p>{{sale.saleDate}}</p>
The {{sale.saleDate}} in the p tags is accessible, and displays a date like '1/27/2016'. Changing 'start-date' to 'data-start-date' does not work. In the datepicker directive, I have...
var self = this;
$(self.el).datepicker({
startDate: self.params.startDate,
endDate: self.params.endDate,
todayBtn: "linked",
autoclose: true
});
How can I get the start-date to appear dynamically?
I post an example here:
//script.js
new Vue({
el:"#app",
data:function(){
return {
startDate: moment().subtract(7, 'days').format('MM/DD/YYYY'),
cancelDate: moment().format('MM/DD/YYYY')
}
},
ready:function(){
$('.datepicker').datepicker({ startDate: this.startDate });
}
})
// index.html
<div id="app">
<input class="datepicker" type="text" v-model="{{cancelDate}}" value="{{cancelDate}}" >
</div>
https://jsfiddle.net/nosferatu79/jfk97gp9/4/
Hope this help...
I am using jQuery datepicker.
When I choose the date from calender.The date show in text box like this 20132013-08-12 so please help me for saving the data in database.Data field type is date.
Datepicker format is mm/dd/yyyy
i have errors when inserting to my database it insert only 0000-00-00
my codes is
<code>
<input type="text" id="datepicker" name="datepicker" />
<script>
$(function() {
$( "#datepicker" ).datepicker({ dateFormat: "yyyy-mm-dd" });
});
</script>
</code>
yy is the datepicker format for a 4-digit year, so try dateFormat: "yy-mm-dd"
About saving the value to your database you would need to show us the code you have right now.