I am occupying the vue-datepicker component for an input that shows the date that I have in the form. I need to make the date start on the current day and not be able to choose previous days, also change the language, the component dont let me add style
This is the component I am using https://github.com/charliekassel/vuejs-datepicker
I leave part of the summary code:
<template>
<form>
<datepicker :bootstrap-styling="true"
class="form-control"
</datepicker>
</form>
</template>
<sctipt>
import Datepicker from 'vuejs-datepicker';
export default {
components: {
Datepicker,
},
data () {
return {
selectedDate: ''
},
method: {
}
}
</script>
Any ideas? I occupy Vuejs 2 and vuejs-datepicker
There is one syntax error in your codes, you need to move method: {} out of data(), and it is methods, not method.
After fixed it, just follow the tutorial to customize your calendar (check Available Props in the tutorial).
And remember to open your browser console to check any errors.
Below is one demo which allow you customize background, open date, bootstrap styling in the <datepick>.
PS: based on the tutorial, if directly using CDN, have to use <vuejs-datepicker> instead <datepicker>
PS: probably the props provided by datepicker can't meet your requirements, then you have to look into the dom tree for that calendar, then add your css selector to customize it, like what I did for changing background.
Update: clone out one new Date object when every time change open Date, otherwise it will not trigger the reactivity.
app = new Vue({
el: "#app",
components: {
vuejsDatepicker
},
data() {
return {
selectedDate: '',
bootstrapStyling: true,
openDate: new Date()
}
},
methods: {
changeBootstrapStyling: function () {
this.bootstrapStyling = !this.bootstrapStyling
},
changeLanguage: function () {
this.openDate = new Date(this.openDate.setDate(this.openDate.getDate() + 90))
}
}
})
.bg-red > div > div {
background-color:red
}
.bg-white > div > div {
background-color:white
}
<script src="https://unpkg.com/vue#2.5.16/dist/vue.js"></script>
<script src="https://unpkg.com/vuejs-datepicker"></script>
<div id="app">
<button #click="changeBootstrapStyling()">Change Bootstrap Styling</button>
<button #click="changeLanguage()">Change Open Date</button>
<form>
<vuejs-datepicker :bootstrap-styling="true" :open-date="openDate"
class="form-control" :class="{'bg-red':bootstrapStyling, 'bg-white':!bootstrapStyling}"></vuejs-datepicker>
</form>
</div>
Your questions can be divided to three portions and they are
1.How to Apply styling on the vue.js date picker
2.How to make the date start on current date( Disable the previous dates)
3.How to change the language
NB: Your code have a syntax error that is you have used the method property inside the data method , please solve this issue at first
1.Applying styling on your date picker
I had previously answered it on this link , do go through it
https://stackoverflow.com/a/71546906/18083887
2.How to Make your date picker calender to start from current date :
Answer: In the vue date picker package there are some available props which allows you to do so and it is :disabledDates props
see the following example
<datepicker
v-model="startDate"
placeholder="Ends On"
:open-date="new Date()"
:disabledDates="disabledDates">
</datepicker>
in your data property do the followings
data (){
return{
disabledDates:{
to: new Date(Date.now() - 8640000)
}
}
}
Then you will see the previous dates disabled in the calender
Related
I'm using VueJS and VuetifyJS for a web app. How to use a text for the time picker component without getting 12:NaN in the time picker header? I need to have SupriseMe as a text in the textfield and 00:00 as the default in the time picker header.
Here is a CodePen example of the problem: https://codepen.io/anon/pen/OEEeyg?&editors=101
Maybe keep the v-model time at null (as recommended by vuetify) and add a placeholder to the text-field.
Edit: to change the placeholder color, you can override the css by adding a new class name:
data () {
return {
time: null,
//...
}
}
<v-text-field
slot="activator"
v-model="time"
label="Picker in dialog"
prepend-icon="access_time"
readonly
placeholder="SurpiseMe"
class="date-select" //for example
></v-text-field>
<style>
.date-select > .input-group__input > ::placeholder {
color: black !important;
}
</style>
I'm trying to make the materialize date picker editable. Here is the goal, the user can directly write the date in the input field or use the widget to pick a date.
I did something that is about to work on this jsfiddle. But there is a bug I'm trying to solve. When the user directly writes the date in the input, the picker needs to get the new value also (because I use a different format to submit the date and there is a an hidden input field to update). To accomplish that I tried to do
picker.set('select', $(this.val());
But it creates an infinite loop because the method set in materialize also triggers the event change on the input.
EDIT: oh i just found there is an issue open about that on github. Do you have any idea for a workaround?
Any specific reason you want to do it in the change method?
Why not something like this?
this.change(function(event) {
});
this.bind('blur keypress',function(e){
if (moment($(this).val(), "DD/MM/YYYY", true).isValid()) {
var inputFieldDate=getFmtDate($(this).val());
picker.set('select',inputFieldDate);
}
});
This is a utility function to parse the date in DD/MM/YYY format and get a javascript Date object
function getFmtDate(s){
var valx=new Array();
if(s!=null && s.length>0){
valx = s.split('/');
}
var d = new Date(valx[2],valx[1]-1,valx[0]);
return d;
}
This works for me.
Update:
Once you attach a widget to an html element, the usual event callback functions do not work the way you expect them to. Their functionality is overridden by the widget. You cannot use the functions the same way you are used to and have to find a workaround. In short you cannot use the change function to set or unset the date because set triggrers a change event.
In your case you want to address multiple issues which are very common problems. You should be able to get a lot of examples online to achieve each one of those. What I've done is just one way of doing it.
Populate the form in a non traditional way when the page loads.
Initialize various plugins with values from the form when the page loads
Initialize content from hidden fields when the form loads and update the hidden fields when submitting the form.
Fetch the values by name (of the hidden fields) and use them to initialize the widgets.
I've used blur keypress just to give you an idea that all your requirements can be handled without using change. You use the events that work for you. You can set the date by binding picker to calendar object with this keyword and access it from its instance as shown below.
(function($) {
$.fn.calendar = function(options) {
// Options du datepicker
var settings = $.extend({
editable: true,
format: 'dd/mm/yyyy',
formatSubmit: 'ddmmyyyy'
},
options
);
this.pickadate(settings);
//var picker = this.pickadate(''); will not work
this.picker = this.pickadate('picker');
this.change(function(event) {
});
this.bind('blur keypress',function(e){
if (moment($(this).val(), "DD/MM/YYYY", true).isValid()) {
var inputFieldDate=getFmtDate($(this).val());
picker.set('select',inputFieldDate);
}
});
var $triggerIcon = $('<div class="col s2 center-align"><a class="btn-floating btn-large waves-effect waves-light trigger-datepicker">Date</a></div>');
$triggerIcon.click(function(event) {
event.stopPropagation();
event.preventDefault();
picker.open();
});
this.parent().after($triggerIcon);
// Resolves picker opening for thing
this.next().unbind("focus.toOpen");
return this;
};
}(jQuery));
To set a date:
//This is how you set a date
var cal = $('.datepicker').calendar();
//You can access picker because we changed
//var picker to
//this.picker above in fn.calendar
cal.picker.set('select', getFmtDate($("[name=hiddenDate]").val()));
// The syntax is
//cal.picker.set('select', new Date());
$('#formulaireDate').validate();
You have to convert your date to Date(). The below function should give you an idea. You can also use plugins like jquery dateFormat plugin.
function getFmtDate(s){
var valx=new Array();
if(s!=null && s.length>0){
valx = s.split('/');
}
var d = new Date(valx[2],valx[1]-1,valx[0]);
return d;
}
This is your html.
<div class="row">
<div class="col s4">
<input type="text" class="datepicker" />
<input name="hiddenDate" type="hidden" value="12/12/2016">
</div>
</div>
I'm using Angular UI bootstrap's datepicker , and when I change programmatically the date the view doesn't change, when I'm in 30 Novembre and I programmatically change the date to 2 December, the date change but the view still fixed in November, here's how I code the next date button.
$scope.right=function(){
if($scope.viewmodel.timeResolution=='yearly')
$scope.dt.setFullYear($scope.dt.getFullYear()+1);
else if($scope.viewmodel.timeResolution=='monthly')
$scope.dt.setMonth($scope.dt.getMonth()+1);
else if($scope.viewmodel.timeResolution=='daily') {
$scope.dt.setDate($scope.dt.getDate() + 1);
}
$scope.changedValue();
};
Html :
<uib-datepicker ng-model="dt" id="dp" datepicker-mode="mode" init-date="initDate" show-weeks=false max-mode="maxMode" min-date="minDate" max-date="maxDate" min-mode="minMode" class="well well-sm" ng-change="changedValue(viewmodel.dt)"></uib-datepicker>
how can I simulate a refresh view everytime I change the date programmatically on the datepicker ?
you need to convert again to date. The function set... only returns the timestamp:
$scope.right=function(){
if($scope.viewmodel.timeResolution=='yearly')
$scope.dt = new Date($scope.dt.setFullYear($scope.dt.getFullYear()+1));
else if($scope.viewmodel.timeResolution=='monthly')
$scope.dt = new Date($scope.dt.setMonth($scope.dt.getMonth()+1));
else if($scope.viewmodel.timeResolution=='daily') {
$scope.dt = new Date($scope.dt.setDate($scope.dt.getDate() + 1));
}
$scope.changedValue();
};
To make your overall experince with angular dates better, you should look into moment .js
http://momentjs.com/
It allows you to create, format, add and subtract dates easily and with minimal issues. Using the default date.set functions can cause a lot of issues.
I have a set up like this using moments with no issues
Im trying to use the Angular Bootstrap Daterange Picker , But every instance overrides the ng model to be textual.
This is the very simple code:
<input class="input-filter form-control" type="daterange" ng-model="test" ranges="ranges" />
{{test}}
Exactly like the 4th example that they provide HERE.
By overriding, I mean that from an object:
{"startDate":"2015-11-28T22:00:00.000Z","endDate":"2015-11-28T22:00:00.000Z"}
It turns to text:
11/11/2015 - 12/14/2015
THIS is a 10 seconds video showing this problem. (hope this helps)
And these are the things I load:
https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/2.1.11/daterangepicker.js
https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/2.1.13/daterangepicker.min.css
https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/2.1.13/moment.min.js
http://luisfarzati.github.io/ng-bs-daterangepicker/ng-bs-daterangepicker.js
I fall into the same issue. I think it caused by the mechanism of updating input value, it probably has been changed in the latest version of daterangepicker (i used v2.1.17 while demo is working with 1.3.17). New daterangepicker has an option autoUpdateInput, it might be helpful to set it to false in directive configuration code (https://github.com/luisfarzati/ng-bs-daterangepicker/blob/master/src/ng-bs-daterangepicker.js):
//...
options.locale = $attributes.locale && $parse($attributes.locale)($scope);
options.opens = $attributes.opens || $parse($attributes.opens)($scope);
options.autoUpdateInput = false; // Changed row
if ($attributes.enabletimepicker) {
options.timePicker = true;
angular.extend(options, $parse($attributes.enabletimepicker)($scope));
}
//...
It helps with incorrect model binding, but there is still a bug with rendering -- initial start/end dates do not rendered (input is blank). So in general it looks like someone just needs to move ng-bs-daterangepicker to the latest version of daterangepicker.
Try using this lightweight pure AngularJS DateRangePicker (no jQuery). https://github.com/tawani/taDateRangePicker
Explanation:
I am building a plugin for an application that uses thisa Bootstrap Datepicker plugin here http://www.eyecon.ro/bootstrap-datepicker/
So I am trying to utilize the same plugin for a Date Picker in my plugin for the app that already uses that Date Picker library.
My app is a Project Management app that shows Project Tasks in a popup Modal window. IN the Task Modal, there is a Due Date field.
I want to show the Due Date value for a Task when the Modal is opened. When a user clicks on the text for an existing Due Date field, I want to reveal and show an inline Date Picker Calendar. Just like the linked to library above!
So a user clicks on the Due date to reveal the date picker. They then click a date value which make an AJAX post to server and saves the new date value. It then should update the text that they originally clicked on with the new date value and then hide/close the date picker.
All pretty simple however I can use a little help please!
I have a Working JSFiddle Demo: http://jsfiddle.net/jasondavis/dd1bmrrc/
My custom code is all shown below as well. All that is missing is the Bootstrap Date Picker library, jQuery, MockAjax library, and CSS. It is all loaded on the JSFiddle linked above though.
You can also see some options on the Date Pickers project page here http://www.eyecon.ro/bootstrap-datepicker/
The Problem
On my demo page here http://jsfiddle.net/jasondavis/dd1bmrrc/ you will see that I have a span holding a Date value.
Next to it is a text input which when clicked on shows the Date Picker Calendar.
After selecting a Date, my span is updated and Date Picker is hidden.
Clicking my span again shows the Date picker text box.
You then have to click the text box as well to see the Date Picker Calendar.
So my goal is to not have the Text Box. The Span value should open and close the Datepicker, without a textbox needing to exist!
Is this even possible?
The Code
HTML:
<span id="due-date-span">1/1/2015</span>
<input type="text" class="span2" value="02-16-2012" id="task-due-date-cal">
JavaScript for Date Picker:
$(function(){
// Show Date Picker Calaendar when "Due Date" SPAN text is clicked on:
$('#due-date-span').on('click', function(){
$('#task-due-date-cal').show();
});
// Instantiate and run Date Picker Calendar plugin
var dueDatePicker = $('#task-due-date-cal').datepicker({
format: 'mm-dd-yyyy',
// When Date Picker Date is clicked on to change a Date value:
}).on('changeDate', function(ev){
dueDate = new Date(ev.date);
// Make AJAX POST to save Due Date value to the server and update DOM.
$.ajax
({
type: "post",
url: "updateDueDate",
data: "date="+dueDate,
success: function(result)
{
// UPDATE SPAN #due-date-span with new Date value
$('#due-date-span').text(dueDate);
// Close/Hide Date Picker, until it is clicked to show again
$('#task-due-date-cal').hide();
$('#task-due-date-cal').datepicker('hide');
}
});
});
});
Mock AJAX request for Demo:
// Mock AJAX response for AJAX request to /updateDueDate to Update In-line Task Due Date Fields
$.mockjax({
url: '/updateDueDate',
responseTime: 900, // simulate lag
response: function(settings) {
//console.log(settings.data);
console.log('info', 'UPDATE TASK FIELD AJAX REQUEST SENT', settings.data);
if(settings.data.value == 'err') {
this.status = 500;
this.responseText = 'Validation error!';
} else {
this.responseText = '';
}
}
});
One way is to leave the input, lay it over top of the span but with css that makes it invisible to user. The events are still triggered on the input
#task-due-date-cal, #task-due-date-cal:focus{
position:absolute;
z-index:10000;
left:0;
top:0;
background:none;
font-size:0;
border:none;
margin:0;
box-shadow:none;
}
I used an extra wrapper with position relative around the input and span
DEMO