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" />
Related
When I try to use the "Datepicker" in svelte with carbon-components I can configure the output to be set in a german locale style but after sending the form, the datepicker only shows "Please match the requested format." I am missing something but I really don`t now what I am missing.
Here is my code
<script lang="ts">
import { DataTable, DatePicker, DatePickerInput, NumberInput, Grid, Row, Column, Button, FluidForm } from "carbon-components-svelte";
let datum: Date;
</script>
<Grid>
<Row>
<Column>
<form>
<DatePicker
format="de-CH"
dateFormat="d.m.Y"
locale="de"
datePickerType="single"
flatpickrProps={
{
locale:
{firstDayOfWeek: 1},
dateFormat: "d.m.Y",
}
}
on:change bind:value={datum}
>
<DatePickerInput labelText="Datum" placeholder="dd.mm.yyyy" />
</DatePicker>
<Button size="small" type="submit">Submit</Button>
</form>
</Column>
</Row>
</Grid>
Screenshot of the error message:
When I remove the formatting stuff, the form works and the date is getting send.
This is a example without formatting with german locale
<script lang="ts">
import { DataTable, DatePicker, DatePickerInput, NumberInput, Grid, Row, Column, Button, FluidForm } from "carbon-components-svelte";
let datum: Date;
</script>
<Grid>
<Row>
<Column>
<form>
<DatePicker
datePickerType="single"
flatpickrProps={
{
locale:
{firstDayOfWeek: 1},
}
}
on:change bind:value={datum}
>
<DatePickerInput labelText="Datum" placeholder="dd.mm.yyyy" />
</DatePicker>
<Button size="small" type="submit">Submit</Button>
</form>
</Column>
</Row>
</Grid>
What am I missing? How can I use german locale with a german date format without getting the Error "Please match the requested format."?
These locale settings consist of various direct props that should be set:
DatePicker: locale & dateFormat
DatePickerInput: pattern
The flatpickr package also provides a large set of locales, I would recommend passing the German one directly to get day and month names.
import { German } from 'flatpickr/dist/l10n/de.js'; // there also is an ESM dir
<DatePicker locale={German} dateFormat="d.m.Y" ...>
<DatePickerInput pattern={'\\d{2}\\.\\d{2}\\.\\d{4}'} .../>
</DatePicker>
REPL
The pattern determines the regular expression used to check the value, so that has to match the input/dateFormat. (Pattern is passed in a string because of the curly braces within, which would cause Svelte to interpolate the number literals otherwise.)
<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);
ngx-bootstrap has a custom implementation for datepicker locales.
As my project is already using moment.js locales, i'm wondering is it possible to use moment.js locales with ngx-bootstrap datepicker?
yes, you can use both the follow way:
<div class="row">
<div class="col-xs-12">
<label>Date</label>
<input [(ngModel)]="distributionDate"
required tabindex="2"
class="form-control"
placeholder="please select a date"
bsDatepicker
[bsConfig]="{ dateInputFormat: 'MMMM D, YYYY', containerClass: 'theme-red' }"
(onHidden)="dateIsValid('distributionDate')"/>
</div>
</div>
[bsConfig]= that use format defined by moment.
(onHidden)= event that is executed when you out of field
you can define in some service to consume or only in your component.
dateIsValid(fieldName) {
if (!isNullOrUndefined(this[fieldName])) {
if (moment(this.formatDate(this[fieldName]), 'MMMM D, YYYY', true).isValid()) {
this[fieldName] = this.formatDate(this[fieldName]);
this.errors[fieldName] = false;
return true;
} else {
this.errors[fieldName] = true;
return false;
}
}
}
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"
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.