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.
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" />
I'm facing an issue regarding sap.m.DatePicker. I want to see Today's Date in the calendar, when I click on the calendar Icon. But I'm not able to display. Below is my Code:
<DatePicker displayFormat="dd-MM-yyyy" valueFormat="yyyy-MM-dd" value="31-12-9999" navigate=".onNavigateDate"/>
In the above screenshot, I'm getting date 31-12-9999 from the back-end. But if click on calendar icon, I should see today's date in the calendar. It is very difficult for the user to navigate to the current date.
I have tried using setInitialFocusedDateValue but it didn't work. Below is my JavaScript code for the navigate event.
onNavigateDate: function(event) {
var dateObject = event.getSource();
dateObject.setModel(new JSONModel({ date: new Date() }));
var m = dateObject.getModel();
dateObject.setDateValue(m.getProperty("/date"));
dateObject.setInitialFocusedDateValue(m.getProperty("/date"));
},
Can someone please help me to display today's date in the calendar if I click on the Calendar Icon?
I used the navigate event like this and it worked:
View:
<DatePicker
id="DP1"
placeholder="Enter Date ..."
navigate="onNavigate"
value="31-12-9999"
class="sapUiSmallMarginBottom"/>
And in the controller:
onNavigate : function(oEvent) {
oEvent.getSource().setValue(new Date())
}
The logic you are using on your navigate method does not seem to work. Probably because of your UI5 version. The initialFocusedDateValue property was only released on version 1.46.0. Also, keep in mind that the approach I did changes the value of the date picker, which means that once closed, it will have today's date as a value.
by default it shows today's date
remove 31-12-9999 in here
<DatePicker displayFormat="dd-MM-yyyy" valueFormat="yyyy-MM-dd" editable="true" navigate="onclickDate" value="31-12-9999"/>
unfortunately, you have to override a private function :-(
oDatePicker._openPopup = function() {
var today = new Date();
this.setValue(today.getFullYear() + '-' + (today.getMonth() +1) + '-' + today.getDate());
DatePicker.prototype._openPopup.apply(this, arguments);
}
http://jsbin.com/dotames/edit?html,js,output
because we cannot change value in the navigate event handle as it is too late (popover has already appeared)
It is very difficult for the user to navigate to the current date.
Since UI5 1.95 (commit dd3aeaa), controls displaying a calendar can set showCurrentDateButton="true" in order to display a Today icon in the navigation header area.
Here is a sample with sap.m.DatePicker:
<!-- No navigate handler needed -->
<DatePicker showCurrentDateButton="true"/>
globalThis.onUI5Init = () => sap.ui.require([
"sap/ui/core/mvc/XMLView"
], async XMLView => {
const definition = document.getElementById("myxmlview").textContent;
const view = await XMLView.create({ definition });
view.placeAt("content");
});
<script defer id="sap-ui-bootstrap"
src="https://openui5nightly.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-libs="sap.ui.core,sap.m,sap.ui.unified"
data-sap-ui-oninit="onUI5Init"
data-sap-ui-async="true"
data-sap-ui-theme="sap_fiori_3"
data-sap-ui-excludejquerycompat="true"
data-sap-ui-compatversion="edge"
data-sap-ui-xx-waitfortheme="init"
></script>
<script id="myxmlview" type="text/xml">
<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" displayBlock="true">
<App>
<Page showHeader="false" class="sapUiResponsiveContentPadding">
<DatePicker showCurrentDateButton="true" value="9999-12-31" width="12rem"/>
</Page>
</App>
</mvc:View>
</script>
<body id="content" class="sapUiBody sapUiSizeCompact"></body>
Once clicked, the calendar will navigate to and focus today's date.
Press Enter, Space, or click the focused date to select today.
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"
There is an edit page where a user can, obviously, edit aspects of an event. Everything displays fine except the Date shows empty.
I am using the type="date" in my html which may be a cause, how can I get around this so that I can show the date, because when it saves it saves as null after editing the event
View:
<div class="form-group">
<input class="form-control" type="date" name="editEvent[startDate]" placeholder="Date" value="<%= event.startDate %>">
</div>
Route:
router.get("/event/:id/edit", isLoggedIn, function(req,res){
Event.findById(req.params.id, function (err, foundEvent) {
if(err){
console.log(err);
console.log("Cannot find the event...maybe the database isnt running?")
} else {
res.render("eventEdit", {event: foundEvent});
Everything works fine but the date
Can you add some more information to the question? at the moment it looks quite unclear. like how is your server set up.
It turns out its an HTML thing, if you want to display a date you have to have it formattted as YYYY-MM-DD then it shows fine, otherwise it doenst recognize the format.
This comes into account if you use the type="date" attribute in your input
I had to edit the event date coming from mongo using momentjs and here is the line I used.
var newDate = moment(foundEvent.startDate).utc().format("YYYY-MM-DD")
res.render("eventEdit", {event: foundEvent, newDate:newDate});
The newDate is the variable being passed to the template, then I just have:
<input class="form-control" type="date" name="editEvent[startDate]" placeholder="Date" value="<%= newDate %>">
This works.
I'm using a date picker plugin called angular-bootstrap-datetimepicker
html:
<input type="text" ng-disabled="true" ng-required="true" name="startDate"
data-ng-model="source" class="input-large date-time-select-input ng-pristine
ng-untouched ng-valid ng-valid-required" date-time-text-field=""
required="required" disabled="disabled">
when the page loads, a date is populated in the box. I can't get the value from this textbox.
I tried:
element(by.name("startDate")).getAttribute('value'); //returns null
element(by.name("startDate")).getText(); //returns empty string
So I had asked dev to add in an id attribute, then I was able to locate it via id and do -
DisputeQueueSearchPage.startDateTextbox.getAttribute('value').then(function(text){
console.log(text);
});
this works now.
await this.shipmentEndDateInFilter.getAttribute('value').then(function(text){
console.log(text);
})
Works for me as well on fetching the by the default value of the date textbox.