显示Angular uib-datepicker-popup默认日期

时间:2017-08-18 16:21:46

标签: javascript angularjs datepicker

有时候一件非常非常简单的事情变得过于复杂。我有一个datepicker弹出窗口设置,并希望它默认为今天的日期,如果没有可用的模型值。我使用了" initDate"配置选项,它确实在弹出窗口中设置默认日期,但不在显示日期的文本框中设置。要使日期选择器的文本框具有日期,似乎必须满足以下两个条件之一:1。模型已分配日期值。 2.用户从日期选择器中选择一个日期。这对我来说是不可接受的。为什么要包含一个设置默认日期的选项,如果只是突出显示默认日期的按钮,并且不显示在文本框中?

模型中此日期的存在会触发模型的显示和保存中的一些逻辑,因此仅将模型设置为特定日期是不可接受的。我需要提供一个默认日期,并将其实际反映在小部件中,其方式与设置模型日期值时的方式相同。有人能帮忙吗?它非常恶化。这个小部件非常有用,有很多优秀的选项和行为,而且我已经编写了一个控制器来处理在日期范围内使用这个小部件。范围的结尾是我想要应用默认值的地方。不是模型的指定值,而是默认值。有什么建议吗?

每个请求,一些代码......

// Class for uib-datepicker config options.
export class DatepickerConfig {
    public formatYear: string;
    public formatMonth: string;
    public formatDay: string;
    public minDate: Date;
    public maxDate: Date;
    public initDate: Date;
}

// This controller only handles setting config options and disabling restricted dates. 
export class DatepickerRangeController {

    // You'd think the config objects would set the format for the popup, but that ain't the case.
    public dpPopupDateFormat: string;

    // Start/end date config objects.
    public startDpOptions: DatepickerConfig;
    public endDpOptions: DatepickerConfig;

    // Boolean values that indicate whether or not a datepicker popup is open. Setting this to 'true' causes popup to open.
    public startDpOpened: boolean;
    public endDpOpened: boolean;

    // Allow end of date range to be a future date. 
    public allowFutureEndDate: boolean;

    static $inject = [
    ];

    constructor() {
        super();
        this.initialize();
    }

    private initialize() {
        // Could have used config options to build this, but that's a pain. Only worthwhile if format 
        // is being built dynamically, as in supporting multiple formats. Only one format supported at present.
        this.dpPopupDateFormat = 'MM/dd/yyyy';

        // Basic config options. 
        this.startDpOptions = new DatepickerConfig();
        this.startDpOptions.initDate = new Date();
        this.startDpOptions.formatYear = 'yyyy';
        this.startDpOptions.formatMonth = 'MM';
        this.startDpOptions.formatDay = 'dd';            

        // Copy values to other config object.
        this.endDpOptions = angular.copy(this.startDpOptions);            

        // Set the initial value of these variables to 'false'. Popups won't open otherwise.
        this.startDpOpened = false;
        this.endDpOpened = false;
    }

    // Code truncated for brevity.
}

这是在TypeScript中,由by。无论如何,我想设置'initDate'当前日期的配置选项可以解决这个问题,从某种意义上说,它确实如此,因为实际日历上突出显示的日期(按钮)是由“初始日期”指定的日期。但它与将模型设置为某个值或用户选择日期时的情况大不相同。这是布局 - 我有一个带有日期范围的表单,所以我创建了这个控制器,它接受出生/死亡日期,并使用它们为开始和结束日期设置初始日期选择限制(minDate,maxDate) 。由于在页面加载时访问该对象时出现问题,因此在打开datepicker时将其作为模型传递。每次打开一个日期选择器时都会运行相同的函数,因此它可以在值变化时更新受限制的开始/结束日期。例如,这让我确保没有人在结束日期之后设置开始日期。我可以通过在模型中设置结束日期来处理我的默认日期问题(严重),这将完全符合所请求的行为,但这将是一个痛苦。我需要跳过一些箍。我不能简单地修改模型本身,因为此日期在屏幕的其他位置(在列表视图中)可见,并且将模型的结束日期设置为今天将使其看起来好像设置了结束日期,什么时候没有。我可以换出一个克隆的对象,但是在保存时我必须检查我的对象的另一个属性并根据它手动取出结束日期。仅在弹出窗口中设置默认日期似乎很荒谬。

0 个答案:

没有答案